<template>
  <view class="h-full w-full">
    <div ref="muiPlayer"></div>
  </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() {
      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"></style>
