first commit

src/components/FlvPlayer/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flv-player-wrapper">
+    <video :id="`videoElement${props.id}`" :controls="false" autoplay muted
+      style="width: 100%; height: 100%; object-fit: fill;">
+    </video>
+  </div>
+</template>
+
+<script setup>
+import flvjs from 'flv.js'
+import { onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: ''
+  },
+  url: {
+    type: String,
+    default: ''
+  }
+})
+
+let player = null
+let flag = 0
+let retryCount = 0
+const MAX_RETRIES = 30
+const initPlayer = () => {
+  if (flvjs.isSupported()) {
+    if (!props.url) {
+      return null
+    }
+
+    const videoElement = document.getElementById(`videoElement${props.id}`)
+    clear()
+    // 调用云台旋转判sign
+
+    const url = props.url
+
+    player = flvjs.createPlayer(
+      {
+        type: 'flv',
+        isLive: true,
+        hasAudio: false,
+        url: url
+      },
+      {
+        // // 启用IO隐藏缓冲区
+        // // 如果需要实时(最小延迟)来进行实时流播放,则设置为false
+        // // 但是如果网络抖动,则可能会停顿
+        // enableStashBuffer: false,
+        // // 之时IO暂存缓冲区的初始大小,默认值为384kb,指出合适的尺寸可以改善视频负载/搜索时间
+        // stashInitialSize: 128
+
+        // 启用缓冲区优化
+        enableStashBuffer: true, // 改为true启用缓冲
+        stashInitialSize: 1024 * 1024, // 设置初始缓冲大小
+        maxBufferLength: 30 // 最大缓冲时长(秒)
+      }
+    )
+
+    player.attachMediaElement(videoElement)
+    player.load()
+    player.play()
+    console.log('player play')
+    flag += 1
+
+    player.on('error', () => {
+      console.log('errorrrrrrrrrrrrrrrrrrrrrrrr')
+      clear()
+      //  重试次数增加，延长时间指数增长，不超过10s
+      const retryDelay = Math.min(10000, 1000 * Math.pow(2, retryCount))
+      retryCount++
+
+      setTimeout(() => {
+        console.log(retryCount, retryDelay, '重连次数......')
+        if (retryCount <= MAX_RETRIES) {
+          initPlayer() // 重新初始化播放器
+        } else {
+          player.pause()
+          if (player) {
+            player = null
+          }
+          console.error('重试超过最大次数')
+        }
+      }, retryDelay)
+    })
+
+  }
+}
+
+const clear = () => {
+  if (player) {
+    player.pause()
+    player.destroy()
+    player = null
+  }
+}
+
+onMounted(() => {
+  initPlayer()
+})
+
+onUnmounted(() => {
+  clear()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.flv-player-wrapper {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}
+</style>