Commit bf0dc7c76fb90a456cd7777c9c82d49d54c8a4cb

Authored by xp.Huang
2 parents 1e4d46d4 d98d624b

Merge branch 'ft-dev' into 'main'

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

See merge request huang/yun-teng-iot-front!213
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 </div> 18 </div>
19 </template> 19 </template>
20 <script lang="ts"> 20 <script lang="ts">
21 - import { defineComponent, reactive, ref } from 'vue'; 21 + import { defineComponent, reactive, ref, nextTick } from 'vue';
22 import { BasicModal, useModalInner } from '/@/components/Modal'; 22 import { BasicModal, useModalInner } from '/@/components/Modal';
23 23
24 export default defineComponent({ 24 export default defineComponent({
@@ -33,34 +33,41 @@ @@ -33,34 +33,41 @@
33 const heightNum = ref(800); 33 const heightNum = ref(800);
34 const [register] = useModalInner(async (data) => { 34 const [register] = useModalInner(async (data) => {
35 if (data) { 35 if (data) {
36 - const fileText = data.record?.videoUrl.split('.').pop();  
37 - videoPoster.value = data.record?.avatar;  
38 - options.width = '800px'; //播放器高度  
39 - options.height = '500px'; //播放器高度  
40 - options.color = ''; //主题色  
41 - options.type =  
42 - fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : 'video/x-flv';  
43 - options.title = data.record?.name; //视频名称  
44 - options.src = data.record?.videoUrl; //视频源  
45 - options.muted = false; //静音  
46 - options.webFullScreen = false;  
47 - options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速  
48 - options.autoPlay = false; //自动播放  
49 - options.loop = false; //循环播放  
50 - options.mirror = false; //镜像画面  
51 - options.ligthOff = false; //关灯模式  
52 - options.volume = 0.3; //默认音量大小  
53 - options.control = true; //是否显示控制  
54 - options.controlBtns = [  
55 - 'audioTrack',  
56 - 'quality',  
57 - 'speedRate',  
58 - 'volume',  
59 - 'setting',  
60 - 'pip',  
61 - 'pageFullScreen',  
62 - 'fullScreen',  
63 - ]; //显示所有按钮, 36 + if (data.record.videoUrl) {
  37 + nextTick(() => {
  38 + /**
  39 + * options配置项(使用vue3-video-play插件)
  40 + * 新增支持m3u8流视频
  41 + */
  42 + const fileText = data.record?.videoUrl.split('.').pop();
  43 + videoPoster.value = data.record?.avatar;
  44 + options.width = '800px'; //播放器高度
  45 + options.height = '500px'; //播放器高度
  46 + options.color = ''; //主题色
  47 + options.type = fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : '';
  48 + options.title = data.record?.name || '无'; //视频名称
  49 + options.src = data.record?.videoUrl || ''; //视频源
  50 + options.muted = false; //静音
  51 + options.webFullScreen = false;
  52 + options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
  53 + options.autoPlay = false; //自动播放
  54 + options.loop = false; //循环播放
  55 + options.mirror = false; //镜像画面
  56 + options.ligthOff = false; //关灯模式
  57 + options.volume = 0.3; //默认音量大小
  58 + options.control = true; //是否显示控制
  59 + options.controlBtns = [
  60 + 'audioTrack',
  61 + 'quality',
  62 + 'speedRate',
  63 + 'volume',
  64 + 'setting',
  65 + 'pip',
  66 + 'pageFullScreen',
  67 + 'fullScreen',
  68 + ]; //显示所有按钮,
  69 + });
  70 + }
64 } 71 }
65 }); 72 });
66 const handleCancel = () => {}; 73 const handleCancel = () => {};