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 | 109 | ] | 
| 110 | 110 | } | 
| 111 | 111 | |
| 112 | + | |
| 112 | 113 | // 初始化videojs | 
| 113 | 114 | const initVideo = async () => { | 
| 114 | 115 | if (videoRef.value) { | 
| ... | ... | @@ -148,12 +149,12 @@ const initVideo = async () => { | 
| 148 | 149 | watch( | 
| 149 | 150 | () => props.sourceSrc, | 
| 150 | 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 | 160 | immediate: true | ... | ... | 
| 1 | 1 | <template> | 
| 2 | 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 | 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 | 12 | </div> | 
| 10 | 13 | </n-spin> | 
| 11 | 14 | </div> | 
| ... | ... | @@ -35,13 +38,18 @@ const option = shallowReactive({ | 
| 35 | 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 | 47 | watch( | 
| 39 | 48 | () => dataset?.value, | 
| 40 | 49 | (newData: string) => { | 
| 50 | + loadTime(800, true) | |
| 41 | 51 | if (newData) { | 
| 42 | - setTimeout(() => { | |
| 43 | - showLoading.value = false | |
| 44 | - }, 2000); | |
| 52 | + loadTime(2000, false) | |
| 45 | 53 | } | 
| 46 | 54 | option.dataset = newData | 
| 47 | 55 | }, | ... | ... |