<template>
  <div class="videoBox">
    <video id="videoElement" autoplay muted style="width: 100%; height: 100%; object-fit: fill"></video>
  </div>
</template>
<script setup >
import { ref, reactive, nextTick, onMounted, onUnmounted } from "vue"
import flvjs from 'flv.js';


const flvPlayer = ref(null);
const createVideo = () => {
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    flvPlayer.value = flvjs.createPlayer(
      {
        type: 'flv',
        url: '', //你的url地址
        isLive: true,
        hasAudio: false,
      },
      {
        enableWorker: false,
        fixAudioTimestampGap: false
      }
    );
    flvPlayer.value.attachMediaElement(videoElement);
    flvPlayer.value.load();

    setTimeout(function () {
      flvPlayer.value.play();
    }, 300);
    //处理视频播放错误的语法
    // flvPlayer.value.on('error', () => {
    //   // message.error(`视频加载失败，请稍候重试！`);
    //   return false;
    // });
  }
};
const destroy = () => {
  flvPlayer.value.pause(); //暂停播放数据流
  flvPlayer.value.unload(); //取消数据流加载
  flvPlayer.value.detachMediaElement(); //将播放实例从节点中取出
  flvPlayer.value.destroy(); //销毁播放实例
  flvPlayer.value = null;
};
defineExpose({ destroy });

onMounted(() => {
  createVideo();
});
onUnmounted(async () => {
  destroy()
});
</script>
<style scoped>
.videoBox {
  width: 800px;
  height: 450px;
  border: solid 1px #ccc;
}
</style>