<!-- flvExtend 是一个基于 flv.js 的功能扩展插件，旨在解决直播流媒体播放中的常见问题，如追帧、断流重连和实时更新。该项目通过封装 flv.js 和 mpegts.js，提供了更流畅的追帧、断流重连和实时更新视频的功能。
主要特性
  更流畅的追帧：优化了视频追帧的流畅性。
  断流重连：自动处理断流情况，实现重连功能。
  实时更新视频：确保视频内容实时更新。
  解决 stuck 问题：视频卡住时自动重建。
-->
<script setup>
import { onUnmounted, ref } from 'vue'
// 引入 flv-extend 库
import FlvExtend from 'flv-extend'
const videoRef = ref(null) // 引用 video 元素
let flvPlayer = null // flv 播放器实例
const videoUrl = '' // FLV 视频地址

// 播放视频的方法
const playVideo = () => {
  if (FlvExtend.isSupported()) {
    // 创建 flv 播放器实例
    flvPlayer = FlvExtend.createPlayer({
      type: 'flv',
      url: videoUrl,
    })
    // 将播放器实例绑定到 video 元素上
    flvPlayer.attachMediaElement(videoRef.value)
    // 加载视频
    flvPlayer.load()
    // 开始播放视频
    flvPlayer.play()
  }
}

// 停止视频的方法
const stopVideo = () => {
  if (flvPlayer) {
    // 暂停播放
    flvPlayer.pause()
    // 卸载视频资源
    flvPlayer.unload()
    // 解除与 video 元素的绑定
    flvPlayer.detachMediaElement()
    // 销毁播放器实例
    flvPlayer.destroy()
    flvPlayer = null
  }
}

// 组件卸载时停止视频播放并释放资源
onUnmounted(() => {
  stopVideo()
})

onMounted(() => {

})
</script>

<template>
  <div class="player" style="position: relative;">
    <video v-show="url" ref="videoRef" class="centeredVideo" controls autoplay muted />
  </div>
</template>

<style scoped lang="scss">
.player {
  background-color: black;
  height: 100%;
  width: 100%;
  // border: 1px solid white;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
}

.centeredVideo {
  width: 100%;
  height: 98%;
}
</style>