Commit bf0dc7c76fb90a456cd7777c9c82d49d54c8a4cb
Merge branch 'ft-dev' into 'main'
fix:视频预览添加nextTick和非空判断 See merge request huang/yun-teng-iot-front!213
Showing
1 changed file
with
36 additions
and
29 deletions
@@ -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 = () => {}; |