Commit 910d65aecc9993b6a5cf6795795404cc6bb3a74f
Committed by
xp.Huang
1 parent
e6d5c81b
perf(src/packages/external/Informations): 单个摄像头,优化切换视频后,视频地址未更新
Showing
2 changed files
with
23 additions
and
14 deletions
@@ -109,6 +109,7 @@ async function getSource() { | @@ -109,6 +109,7 @@ async function getSource() { | ||
109 | ] | 109 | ] |
110 | } | 110 | } |
111 | 111 | ||
112 | + | ||
112 | // 初始化videojs | 113 | // 初始化videojs |
113 | const initVideo = async () => { | 114 | const initVideo = async () => { |
114 | if (videoRef.value) { | 115 | if (videoRef.value) { |
@@ -148,12 +149,12 @@ const initVideo = async () => { | @@ -148,12 +149,12 @@ const initVideo = async () => { | ||
148 | watch( | 149 | watch( |
149 | () => props.sourceSrc, | 150 | () => props.sourceSrc, |
150 | async () => { | 151 | async () => { |
151 | - videoPlayer?.src('') | ||
152 | - const result = await getSource() | ||
153 | - if (props.autoPlay) { | ||
154 | - videoPlayer?.src(result) | ||
155 | - videoPlayer?.play() | ||
156 | - } | 152 | + videoPlayer?.src({ |
153 | + type: getVideoTypeByUrl(props.sourceSrc), | ||
154 | + src: props.sourceSrc! | ||
155 | + }); | ||
156 | + videoPlayer?.load(); | ||
157 | + videoPlayer?.play() | ||
157 | }, | 158 | }, |
158 | { | 159 | { |
159 | immediate: true | 160 | immediate: true |
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <n-spin size="medium" :show="showLoading"> | ||
4 | - <template #description> | ||
5 | - 视频正在努力加载中...... | ||
6 | - </template> | 3 | + <n-spin size="medium" :show="showLoading" :content-style="{ background: 'red' }"> |
4 | + <template #description> 视频正在努力加载中...... </template> | ||
7 | <div> | 5 | <div> |
8 | - <VideoPlay :baseSize="{ w, h }" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" /> | 6 | + <VideoPlay |
7 | + :baseSize="{ w, h }" | ||
8 | + :sourceSrc="option.dataset" | ||
9 | + :autoPlay="option.autoplay" | ||
10 | + :avatar="option.poster" | ||
11 | + /> | ||
9 | </div> | 12 | </div> |
10 | </n-spin> | 13 | </n-spin> |
11 | </div> | 14 | </div> |
@@ -35,13 +38,18 @@ const option = shallowReactive({ | @@ -35,13 +38,18 @@ const option = shallowReactive({ | ||
35 | autoplay: configOption.autoplay | 38 | autoplay: configOption.autoplay |
36 | }) | 39 | }) |
37 | 40 | ||
41 | +const loadTime = (time: number, status: boolean) => { | ||
42 | + setTimeout(() => { | ||
43 | + showLoading.value = status | ||
44 | + }, time) | ||
45 | +} | ||
46 | + | ||
38 | watch( | 47 | watch( |
39 | () => dataset?.value, | 48 | () => dataset?.value, |
40 | (newData: string) => { | 49 | (newData: string) => { |
50 | + loadTime(800, true) | ||
41 | if (newData) { | 51 | if (newData) { |
42 | - setTimeout(() => { | ||
43 | - showLoading.value = false | ||
44 | - }, 2000); | 52 | + loadTime(2000, false) |
45 | } | 53 | } |
46 | option.dataset = newData | 54 | option.dataset = newData |
47 | }, | 55 | }, |