Showing
1 changed file
with
36 additions
and
29 deletions
| ... | ... | @@ -18,7 +18,7 @@ |
| 18 | 18 | </div> |
| 19 | 19 | </template> |
| 20 | 20 | <script lang="ts"> |
| 21 | - import { defineComponent, reactive, ref } from 'vue'; | |
| 21 | + import { defineComponent, reactive, ref, nextTick } from 'vue'; | |
| 22 | 22 | import { BasicModal, useModalInner } from '/@/components/Modal'; |
| 23 | 23 | |
| 24 | 24 | export default defineComponent({ |
| ... | ... | @@ -33,34 +33,41 @@ |
| 33 | 33 | const heightNum = ref(800); |
| 34 | 34 | const [register] = useModalInner(async (data) => { |
| 35 | 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 | 73 | const handleCancel = () => {}; | ... | ... |