无人机调整

src/components/FlvVideo/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <video ref="videoRef" :autoplay="autoPlay" :controls="controls" :muted="muted" />
+  <div class="player-box">
+    <video ref="videoRef" :autoplay="autoPlay" :controls="controls" :muted="muted" />
+    <div v-show="isLoading" class="loader" />
+  </div>
 </template>
 
 <script lang="ts" setup name="FlvVideo">
@@ -16,7 +19,7 @@ const props = defineProps({
   },
   muted: {
     type: Boolean,
-    default: false
+    default: true
   },
   controls: {
     type: Boolean,
@@ -25,10 +28,11 @@ const props = defineProps({
 });
 const videoRef = ref();
 let flvPlayer = ref();
-
+let isLoading = ref(false);
 // 播放视频
 const handleVideoPlay = () => {
   if (flvjs.isSupported()) {
+    isLoading.value = true;
     if (flvPlayer.value) {
       flvPlayer.value.pause();
       flvPlayer.value.unload();
@@ -50,11 +54,15 @@ const handleVideoPlay = () => {
     flvPlayer.value.attachMediaElement(videoRef.value);
     flvPlayer.value.load();
     flvPlayer.value.play();
+    videoRef.value.addEventListener('playing', () => {
+      isLoading.value = false; // 视频开始播放时关闭加载状态
+    });
     //报错重连
     flvPlayer.value.on(flvjs.Events.ERROR, (errType, errDetail) => {
       if (flvPlayer.value) {
         destoryVideo();
       }
+      isLoading.value = false;
     });
   }
 };
@@ -70,8 +78,50 @@ const destoryVideo = () => {
 };
 
 onMounted(() => {
-  handleVideoPlay();
+  if (props.autoPlay) {
+    handleVideoPlay();
+  }
+});
+defineExpose({
+  handleVideoPlay,
+  destoryVideo
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.player-box {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+  video {
+    width: 100%;
+    height: 100%;
+  }
+  .playWnd {
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+  }
+  .video-enlarge {
+    width: 34px;
+    height: 34px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 10;
+  }
+
+  .loader {
+    position: absolute;
+    z-index: 10;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 32px;
+    height: 32px;
+    background: url('@/assets/images/video/ajax-loader.gif');
+  }
+}
+</style>

src/components/HKVideo/hikvision-h5player.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="player-box">
-    <div :id="state.id" class="playWnd"></div>
-    <div v-show="state.isLoading" class="loader"></div>
+    <div :id="state.id" class="playWnd" />
+    <div v-show="state.isLoading" class="loader" />
     <img v-if="!state.isLoading && !hideEnlarge" class="video-enlarge" src="@/assets/images/video/enlarge.png" alt="" @click="fullScreen" />
   </div>
 </template>
@@ -225,7 +225,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .player-box {
   position: relative;
   display: inline-flex;

src/components/HKVideo/index.vue

@@ -8,7 +8,7 @@
         @on-playing="onHkPlaying"
         @on-play-error="onHKPlayError"
       />
-      <FlvVideo v-if="isPlaying && isNoLive" ref="FlvVideoRef" :videoUrl="dot_data.video_code"style="width: 100%; height: 100%; object-fit: fill" />
+      <FlvVideo v-if="isPlaying && isNoLive" ref="flvVideoRef" :videoUrl="dot_data.video_code" style="width: 100%; height: 100%; object-fit: fill" />
       <img v-if="posterVisible" class="video-play" src="@/assets/images/video/play.png" alt="" />
       <img v-if="posterVisible && dot_data.poster" class="video-poster" :src="dot_data.poster" />
       <div v-if="errBKVisible" class="err_bk">
@@ -77,6 +77,7 @@ const onHKPlayError = async () => {
 };
 
 let videoPlayer = ref(null);
+let flvVideoRef = ref(null);
 let reload = ref(false);
 watch(
   () => props.dot_data,
@@ -84,6 +85,9 @@ watch(
     if (!!videoPlayer.value) {
       videoPlayer.value.stop();
     }
+    if (!!flvVideoRef.value) {
+      flvVideoRef.value.destoryVideo();
+    }
     posterVisible.value = true;
     errBKVisible.value = false;
     isPlaying.value = false;
@@ -105,12 +109,17 @@ const play_now = async (check?: boolean) => {
   posterVisible.value = false;
   errBKVisible.value = false;
   isPlaying.value = true;
-  // 视频监控数据
-  getVideoUrlById(props.dot_data.video_code).then((res) => {
-    wsUrl.value = res.data;
-    videoPlayer.value.play(wsUrl.value);
+  nextTick(() => {
+    if (props.isNoLive) {
+      flvVideoRef.value.handleVideoPlay(props.dot_data.video_code);
+    } else {
+      // 视频监控数据
+      getVideoUrlById(props.dot_data.video_code).then((res) => {
+        wsUrl.value = res.data;
+        videoPlayer.value.play(wsUrl.value);
+      });
+    }
   });
-  console.log('play_now');
 };
 
 const stop_now = async () => {

src/components/HKVideo/index2.vue

@@ -9,7 +9,7 @@
         @on-playing="onHkPlaying"
         @on-play-error="onHKPlayError"
       />
-      <FlvVideo v-if="isPlaying && isNoLive" ref="FlvVideoRef" :videoUrl="dot_data.video_code" style="width: 100%; height: 100%; object-fit: fill" />
+      <FlvVideo v-if="isPlaying && isNoLive" ref="flvVideoRef" :videoUrl="dot_data.video_code" style="width: 100%; height: 100%; object-fit: fill" />
       <div class="video-header">
         <div class="label" :title="dot_data.name">{{ dot_data.name }}</div>
         <div class="video-header-right">
@@ -87,7 +87,7 @@ const isPlaying = ref(false);
 const errBKVisible = ref(false);
 const posterVisible = ref(true);
 let videoPlayer = ref(null);
-let FlvVideoRef = ref(null);
+let flvVideoRef = ref(null);
 const tags = ref([]);
 
 watch(
@@ -96,6 +96,9 @@ watch(
     if (!!videoPlayer.value) {
       videoPlayer.value.stop();
     }
+    if (!!flvVideoRef.value) {
+      flvVideoRef.value.destoryVideo();
+    }
     posterVisible.value = true;
     errBKVisible.value = false;
     isPlaying.value = false;
@@ -145,7 +148,7 @@ const play_now = async (check?: boolean) => {
   isPlaying.value = true;
   nextTick(() => {
     if (props.isNoLive) {
-      FlvVideoRef.value.handleVideoPlay(props.dot_data.video_code);
+      flvVideoRef.value.handleVideoPlay(props.dot_data.video_code);
     } else {
       // 视频监控数据
       getVideoUrlById(props.dot_data.video_code).then((res) => {
@@ -198,7 +201,8 @@ defineExpose({
   play,
   refresh_data,
   handleScreenshot,
-  getPlayer
+  getPlayer,
+  handleFullScreen
 });
 </script>
 
@@ -208,6 +212,7 @@ defineExpose({
   display: flex;
   justify-content: space-between;
   background-color: #000;
+  color: #ffffff;
 }
 
 .video-box {

src/types/components.d.ts

@@ -27,6 +27,7 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -55,6 +56,7 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']

src/views/globalMap/RightMenu/UAV/DroneDetail.vue

@@ -158,7 +158,9 @@ const handleSwitchFlyVideo = () => {
   } else {
     detailsData.value.video_code = detailsData.value.video_url;
   }
-  handleVideoRefresh();
+  nextTick(() => {
+    handleVideoRefresh();
+  });
 };
 
 const handleClose = () => {