|
@@ -11,7 +11,7 @@ |
|
@@ -11,7 +11,7 @@ |
|
11
|
>
|
11
|
>
|
|
12
|
<div class="video-sty">
|
12
|
<div class="video-sty">
|
|
13
|
<div>
|
13
|
<div>
|
|
14
|
- <vue3videoPlay v-bind="options" :poster="videoPoster" />
|
14
|
+ <vue3videoPlay :src="videoUrl" ref="videoRef" v-bind="options" :poster="videoPoster" />
|
|
15
|
</div>
|
15
|
</div>
|
|
16
|
</div>
|
16
|
</div>
|
|
17
|
</BasicModal>
|
17
|
</BasicModal>
|
|
@@ -32,11 +32,14 @@ |
|
@@ -32,11 +32,14 @@ |
|
32
|
emits: ['success', 'register'],
|
32
|
emits: ['success', 'register'],
|
|
33
|
setup() {
|
33
|
setup() {
|
|
34
|
let options: any = reactive({});
|
34
|
let options: any = reactive({});
|
|
|
|
35
|
+ const videoRef: any = ref(null);
|
|
|
|
36
|
+ const videoUrl = ref<String>('');
|
|
35
|
const videoPoster = ref('');
|
37
|
const videoPoster = ref('');
|
|
36
|
const heightNum = ref(800);
|
38
|
const heightNum = ref(800);
|
|
37
|
const [register] = useModalInner(async (data) => {
|
39
|
const [register] = useModalInner(async (data) => {
|
|
38
|
if (data) {
|
40
|
if (data) {
|
|
39
|
if (data.record.videoUrl) {
|
41
|
if (data.record.videoUrl) {
|
|
|
|
42
|
+ videoUrl.value = data.record.videoUrl;
|
|
40
|
nextTick(() => {
|
43
|
nextTick(() => {
|
|
41
|
/**
|
44
|
/**
|
|
42
|
* options配置项(使用vue3-video-play插件)
|
45
|
* options配置项(使用vue3-video-play插件)
|
|
@@ -73,13 +76,18 @@ |
|
@@ -73,13 +76,18 @@ |
|
73
|
}
|
76
|
}
|
|
74
|
}
|
77
|
}
|
|
75
|
});
|
78
|
});
|
|
76
|
- const handleCancel = () => {};
|
79
|
+ const handleCancel = () => {
|
|
|
|
80
|
+ //关闭暂停播放视频
|
|
|
|
81
|
+ videoRef.value.pause();
|
|
|
|
82
|
+ };
|
|
77
|
return {
|
83
|
return {
|
|
78
|
register,
|
84
|
register,
|
|
79
|
handleCancel,
|
85
|
handleCancel,
|
|
80
|
options,
|
86
|
options,
|
|
81
|
heightNum,
|
87
|
heightNum,
|
|
82
|
videoPoster,
|
88
|
videoPoster,
|
|
|
|
89
|
+ videoRef,
|
|
|
|
90
|
+ videoUrl,
|
|
83
|
};
|
91
|
};
|
|
84
|
},
|
92
|
},
|
|
85
|
});
|
93
|
});
|
