Commit 910d65aecc9993b6a5cf6795795404cc6bb3a74f
Committed by
 xp.Huang
 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 | }, |