<template>
  <!-- flv视频流播放 -->
  <div>
    <video
      v-if="show"
      id="videoElement"
      :controls="true"
      autoplay
      style="width: 100%; height: 100%; object-fit: fill;">
    </video>
    <el-empty v-else :image="getAssetsFile('lbtmenu/icon-UAV-inner.png')" description="无人机暂未起飞" />
  </div>
</template>

<script setup>
  import {
    ref, defineExpose, nextTick
  } from 'vue'
  import flvjs from 'flv.js'
  import { getAssetsFile } from '@/utils/common.js'

  const emit = defineEmits([ 'toggleShow' ])
  let flvPlayer = null
  const show = ref(false)
  const clear = () => {
    if (flvPlayer) {
      flvPlayer.unload()
      flvPlayer.detachMediaElement()
      flvPlayer = null
    }
  }
  const onPlay = (url) => {
    show.value = true
    nextTick(() => {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement')
        clear()
        flvPlayer = flvjs.createPlayer(
          {
            type: 'flv',
            isLive: true,
            hasAudio: false,
            url
          },
          {
            // 启用IO隐藏缓冲区
            // 如果需要实时(最小延迟)来进行实时流播放,则设置为false
            // 但是如果网络抖动,则可能会停顿
            enableStashBuffer: false,
            // 之时IO暂存缓冲区的初始大小,默认值为384kb,指出合适的尺寸可以改善视频负载/搜索时间
            stashInitialSize: 128
          }
        )
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        flvPlayer.play()
        emit('toggleShow', show.value)
        flvPlayer.on('error', () => {
          console.log('errorrrrrrrrrrrrrrrrrrrrrrrr')
          show.value = false
          flvPlayer.pause()
          if (flvPlayer) {
            flvPlayer = null
          }
          emit('toggleShow', show.value)
        })
      }
    })
  }
  defineExpose({
    onPlay
  })
</script>

<style scoped>
:deep .el-empty__image{
  width: 60px;
  height: 60px;
}
:deep .el-empty__description p{
  color:#fff;
}
/* 播放按钮 */
video::-webkit-media-controls-play-button {
    display: none;
}
/* 进度条 */
video::-webkit-media-controls-timeline {
    display: none;
}
/* 观看的当前时间 */
video::-webkit-media-controls-current-time-display{
    display: none;
}
/* 剩余时间 */
video::-webkit-media-controls-time-remaining-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;
}
</style>
