|
@@ -11,86 +11,71 @@ |
|
@@ -11,86 +11,71 @@ |
|
11
|
>
|
11
|
>
|
|
12
|
<div class="video-sty">
|
12
|
<div class="video-sty">
|
|
13
|
<div>
|
13
|
<div>
|
|
14
|
- <vue3videoPlay :src="videoUrl" ref="videoRef" v-bind="options" :poster="videoPoster" />
|
14
|
+ <videoPlay
|
|
|
|
15
|
+ v-if="showVideo"
|
|
|
|
16
|
+ ref="video"
|
|
|
|
17
|
+ style="display: inline-block; width: 100%"
|
|
|
|
18
|
+ v-bind="options"
|
|
|
|
19
|
+ />
|
|
15
|
</div>
|
20
|
</div>
|
|
16
|
</div>
|
21
|
</div>
|
|
17
|
</BasicModal>
|
22
|
</BasicModal>
|
|
18
|
</div>
|
23
|
</div>
|
|
19
|
</template>
|
24
|
</template>
|
|
20
|
-<script lang="ts">
|
|
|
|
21
|
- import { defineComponent, reactive, ref, nextTick } from 'vue';
|
25
|
+<script setup lang="ts">
|
|
|
|
26
|
+ import { ref, nextTick, reactive } from 'vue';
|
|
22
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
27
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
23
|
- import vue3videoPlay from 'vue3-video-play'; // 引入组件
|
28
|
+ import { videoPlay } from 'vue3-video-play'; // 引入组件
|
|
24
|
import 'vue3-video-play/dist/style.css'; // 引入css
|
29
|
import 'vue3-video-play/dist/style.css'; // 引入css
|
|
25
|
|
30
|
|
|
26
|
- export default defineComponent({
|
|
|
|
27
|
- name: 'DialogPreviewVideo',
|
|
|
|
28
|
- components: {
|
|
|
|
29
|
- BasicModal,
|
|
|
|
30
|
- vue3videoPlay,
|
|
|
|
31
|
- },
|
|
|
|
32
|
- emits: ['success', 'register'],
|
|
|
|
33
|
- setup() {
|
|
|
|
34
|
- let options: any = reactive({});
|
|
|
|
35
|
- const videoRef: any = ref(null);
|
|
|
|
36
|
- const videoUrl = ref<String>('');
|
|
|
|
37
|
- const videoPoster = ref('');
|
|
|
|
38
|
- const heightNum = ref(800);
|
|
|
|
39
|
- const [register] = useModalInner(async (data) => {
|
|
|
|
40
|
- if (data) {
|
|
|
|
41
|
- if (data.record.videoUrl) {
|
|
|
|
42
|
- videoUrl.value = data.record.videoUrl;
|
|
|
|
43
|
- nextTick(() => {
|
|
|
|
44
|
- /**
|
|
|
|
45
|
- * options配置项(使用vue3-video-play插件)
|
|
|
|
46
|
- * 新增支持m3u8流视频
|
|
|
|
47
|
- */
|
|
|
|
48
|
- const fileText = data.record?.videoUrl.split('.').pop();
|
|
|
|
49
|
- videoPoster.value = data.record?.avatar;
|
|
|
|
50
|
- options.width = '800px'; //播放器高度
|
|
|
|
51
|
- options.height = '500px'; //播放器高度
|
|
|
|
52
|
- options.color = ''; //主题色
|
|
|
|
53
|
- options.type = fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : '';
|
|
|
|
54
|
- options.title = data.record?.name || '无'; //视频名称
|
|
|
|
55
|
- options.src = data.record?.videoUrl || ''; //视频源
|
|
|
|
56
|
- options.muted = false; //静音
|
|
|
|
57
|
- options.webFullScreen = false;
|
|
|
|
58
|
- options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
|
|
|
|
59
|
- options.autoPlay = false; //自动播放
|
|
|
|
60
|
- options.loop = false; //循环播放
|
|
|
|
61
|
- options.mirror = false; //镜像画面
|
|
|
|
62
|
- options.ligthOff = false; //关灯模式
|
|
|
|
63
|
- options.volume = 0.3; //默认音量大小
|
|
|
|
64
|
- options.control = true; //是否显示控制
|
|
|
|
65
|
- options.controlBtns = [
|
|
|
|
66
|
- 'audioTrack',
|
|
|
|
67
|
- 'quality',
|
|
|
|
68
|
- 'speedRate',
|
|
|
|
69
|
- 'volume',
|
|
|
|
70
|
- 'setting',
|
|
|
|
71
|
- 'pip',
|
|
|
|
72
|
- 'pageFullScreen',
|
|
|
|
73
|
- 'fullScreen',
|
|
|
|
74
|
- ]; //显示所有按钮,
|
|
|
|
75
|
- });
|
|
|
|
76
|
- }
|
|
|
|
77
|
- }
|
|
|
|
78
|
- });
|
|
|
|
79
|
- const handleCancel = () => {
|
|
|
|
80
|
- //关闭暂停播放视频
|
|
|
|
81
|
- videoRef.value.pause();
|
|
|
|
82
|
- };
|
|
|
|
83
|
- return {
|
|
|
|
84
|
- register,
|
|
|
|
85
|
- handleCancel,
|
|
|
|
86
|
- options,
|
|
|
|
87
|
- heightNum,
|
|
|
|
88
|
- videoPoster,
|
|
|
|
89
|
- videoRef,
|
|
|
|
90
|
- videoUrl,
|
|
|
|
91
|
- };
|
|
|
|
92
|
- },
|
31
|
+ const heightNum = ref(800);
|
|
|
|
32
|
+ const showVideo = ref(false);
|
|
|
|
33
|
+ const options = reactive({
|
|
|
|
34
|
+ width: '800px',
|
|
|
|
35
|
+ height: '450px',
|
|
|
|
36
|
+ color: '#409eff',
|
|
|
|
37
|
+ muted: false, //静音
|
|
|
|
38
|
+ webFullScreen: false,
|
|
|
|
39
|
+ autoPlay: true, //自动播放
|
|
|
|
40
|
+ currentTime: 0,
|
|
|
|
41
|
+ loop: false, //循环播放
|
|
|
|
42
|
+ mirror: false, //镜像画面
|
|
|
|
43
|
+ ligthOff: false, //关灯模式
|
|
|
|
44
|
+ volume: 0.3, //默认音量大小
|
|
|
|
45
|
+ control: true, //是否显示控制器
|
|
|
|
46
|
+ title: '', //视频名称
|
|
|
|
47
|
+ type: 'm3u8',
|
|
|
|
48
|
+ src: '', //视频源
|
|
|
|
49
|
+ controlBtns: [
|
|
|
|
50
|
+ 'audioTrack',
|
|
|
|
51
|
+ 'quality',
|
|
|
|
52
|
+ 'speedRate',
|
|
|
|
53
|
+ 'volume',
|
|
|
|
54
|
+ 'setting',
|
|
|
|
55
|
+ 'pip',
|
|
|
|
56
|
+ 'pageFullScreen',
|
|
|
|
57
|
+ 'fullScreen',
|
|
|
|
58
|
+ ],
|
|
93
|
});
|
59
|
});
|
|
|
|
60
|
+ const video: any = ref(null);
|
|
|
|
61
|
+
|
|
|
|
62
|
+ nextTick(() => {
|
|
|
|
63
|
+ console.log(video.value);
|
|
|
|
64
|
+ });
|
|
|
|
65
|
+
|
|
|
|
66
|
+ const [register] = useModalInner((data) => {
|
|
|
|
67
|
+ if (data) {
|
|
|
|
68
|
+ if (data.record.videoUrl) {
|
|
|
|
69
|
+ showVideo.value = true;
|
|
|
|
70
|
+ options.src = data.record.videoUrl;
|
|
|
|
71
|
+ options.autoPlay = true;
|
|
|
|
72
|
+ }
|
|
|
|
73
|
+ }
|
|
|
|
74
|
+ });
|
|
|
|
75
|
+ const handleCancel = () => {
|
|
|
|
76
|
+ //关闭暂停播放视频
|
|
|
|
77
|
+ video.value.pause();
|
|
|
|
78
|
+ };
|
|
94
|
</script>
|
79
|
</script>
|
|
95
|
<style>
|
80
|
<style>
|
|
96
|
.video-sty {
|
81
|
.video-sty {
|
