<template>
  <view class="video_flv_h5">
	<div class="video_h5" ref="myPlayer">
		
	</div>
  </view>
</template>

<script>
import flvjs from 'flv.js'
export default {
  props: {
    url: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      player: null,
    }
  },
  mounted() {
    this.videoPlayer()
  },
  beforeDestroy() {
    this.destroyVideos()
  },
  methods: {
    destroyVideos() {
      if (!this.player) return
      this.player?.pause()
      this.player?.unload()
      this.player?.detachMediaElement()
      this.player?.destroy()
      this.player = null,
	  this.$refs.myPlayer.innerHTML="";
    },
    videoPlayer() {
		
      if (!this.url) return
      if (flvjs.isSupported()) {
		let player = document.createElement('video');
		player.enableProgressGesture = true
		player.controls=true
		player.showCenterPlayBtn=true
		player.showPlayBtn=true
		player.showFullscreenBtn=true
		player.x5VideoPlayerType='h5-page'
		player.x5VideoPlayerFullscreen="false"
		player.autoplay= true // 以上均为 video标签的属性配置
    // player.poster = 'https://img.yzcdn.cn/vant/cat.jpeg'
		player.style = 'width: 100%;height:100%;object-fit:cover;';
        let videoElement = this.$refs.myPlayer;
		
		// console.log(videoElement,'videoPlayer=========')
		videoElement.appendChild(player);
        let flvPlayer = flvjs.createPlayer({
          type: 'flv', // 媒体类型，默认是 flv,
          isLive: true, // 是否是直播流
          url: this.url, //你的url地址
        })
        flvPlayer.attachMediaElement(player)
        flvPlayer.load()
        flvPlayer.play()
        this.player = flvPlayer;
      }
    },
  },
  watch: {
    url() {
      this.destroyVideos()
      this.videoPlayer()
    },
  },
}
</script>

<style lang="scss" scoped>
.video_flv_h5{
	width: 100%;
	height: 100%;
	.video_h5{
		width: 100%;
		height: 100%;
	}
}
// video::-webkit-media-controls-enclosure {
//   display: none;
// }
// /* 进度条 */
// video::-webkit-media-controls-timeline {
//   display: none;
// }

// video::-webkit-media-controls-current-time-display {
//   display: none;
// }
// /* 音量按钮 */
// video::-webkit-media-controls-mute-button {
//   display: none;
// }

// video::-webkit-media-controls-toggle-closed-captions-button {
//   display: none;
// }
// /* 音量的控制条 */
// video::-webkit-media-controls-volume-slider {
//   display: none;
// }
// /*  播放按钮 */
// video::-webkit-media-controls-play-button {
//   display: none;
// }

// video::-webkit-media-controls {
//   display: none !important;
// }

// video::-webkit-media-controls-enclosure {
//   display: none !important;
// }
</style>
