first commit

src/components/Common/flv-player.vue

@@ -0,0 +1,110 @@
+<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>