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 = () => {}; |