<template>
  <view class="relative video-box">
    <view class="absolute top-0 left-0 w-full h-full">
      <iframe class="w-full h-full" :src="url" v-if="type == 'iframe'"></iframe>
      <div ref="muiPlayer" v-else></div>
    </view>
  </view>
</template>
<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import Flv from 'flv.js'
import Hls from 'hls.js'
export default {
  props: {
    url: {
      type: String,
      default: null,
    },
    type: {
      type: String,
    },
  },
  mounted() {
    this.videoPlayer()
  },
  methods: {
    videoPlayer() {
      if (this.type == 'iframe') {
        console.log('=====')
      } else {
        let parse = {}
        if (this.type == 'm3u8') {
          parse = {
            type: 'hls',
            loader: Hls,
            config: {
              debug: false,
            },
          }
        } else {
          parse = {
            type: 'flv',
            loader: Flv,
            config: {
              debug: false,
            },
          }
        }
        this.mp = new MuiPlayer({
          container: this.$refs.muiPlayer,
          live: true,
          src: this.url,
          autoplay: true,
          muted: true,
          parse: parse,
          pageHead: false,
          width: '100%',
          height: '100%',
          autoFit: false,
          objectFit: 'contain',
          videoAttribute: [
            {
              attrKey: 'webkit-playsinline',
              attrValue: 'webkit-playsinline',
            },
            {
              attrKey: 'playsinline',
              attrValue: 'playsinline',
            },
            {
              attrKey: 'x5-video-player-type',
              attrValue: 'h5-page',
            },
          ],
          custom: {
            footerControls: [
              {
                style: {},
              },
            ],
          },
        })
        let _video = this.mp.video()

        this.$nextTick(() => {
          this.mp.on('ready', (event) => {
            _video.play()
            _video.addEventListener('play', (e) => {
              //播放事件
              this.$emit('onPlayFn')
            })
            _video.addEventListener('ended', (e) => {
              //播放完成事件
              this.$emit('onEndedFn')
            })
          })
        })
      }
    },
  },
}
</script>
<style lang="scss">
.video-box {
  width: 100%;
  padding-top: 56.2%;
}
</style>
