Merge branch 'ft-dev' into 'main'

fix:视频预览添加nextTick和非空判断

See merge request huang/yun-teng-iot-front!213

@@ -18,7 +18,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref } from 'vue';
+  import { defineComponent, reactive, ref, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
 
   export default defineComponent({
@@ -33,34 +33,41 @@
       const heightNum = ref(800);
       const [register] = useModalInner(async (data) => {
         if (data) {
-          const fileText = data.record?.videoUrl.split('.').pop();
-          videoPoster.value = data.record?.avatar;
-          options.width = '800px'; //播放器高度
-          options.height = '500px'; //播放器高度
-          options.color = ''; //主题色
-          options.type =
-            fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : 'video/x-flv';
-          options.title = data.record?.name; //视频名称
-          options.src = data.record?.videoUrl; //视频源
-          options.muted = false; //静音
-          options.webFullScreen = false;
-          options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
-          options.autoPlay = false; //自动播放
-          options.loop = false; //循环播放
-          options.mirror = false; //镜像画面
-          options.ligthOff = false; //关灯模式
-          options.volume = 0.3; //默认音量大小
-          options.control = true; //是否显示控制
-          options.controlBtns = [
-            'audioTrack',
-            'quality',
-            'speedRate',
-            'volume',
-            'setting',
-            'pip',
-            'pageFullScreen',
-            'fullScreen',
-          ]; //显示所有按钮,
+          if (data.record.videoUrl) {
+            nextTick(() => {
+              /**
+               * options配置项(使用vue3-video-play插件)
+               * 新增支持m3u8流视频
+               */
+              const fileText = data.record?.videoUrl.split('.').pop();
+              videoPoster.value = data.record?.avatar;
+              options.width = '800px'; //播放器高度
+              options.height = '500px'; //播放器高度
+              options.color = ''; //主题色
+              options.type = fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : '';
+              options.title = data.record?.name || '无'; //视频名称
+              options.src = data.record?.videoUrl || ''; //视频源
+              options.muted = false; //静音
+              options.webFullScreen = false;
+              options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
+              options.autoPlay = false; //自动播放
+              options.loop = false; //循环播放
+              options.mirror = false; //镜像画面
+              options.ligthOff = false; //关灯模式
+              options.volume = 0.3; //默认音量大小
+              options.control = true; //是否显示控制
+              options.controlBtns = [
+                'audioTrack',
+                'quality',
+                'speedRate',
+                'volume',
+                'setting',
+                'pip',
+                'pageFullScreen',
+                'fullScreen',
+              ]; //显示所有按钮,
+            });
+          }
         }
       });
       const handleCancel = () => {};