播放视频时,快速切换视频源,在Chrome DevTools 总是报错:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
react 代码片段
<div>
<video controls width="100%" src={videoUrl}/>
</div>
检查发现切换播放内容,videoUrl更新了, 但是播放内容没变化
原因: 调用play()的时候,视频文件还没有加载完成
所以: 要先load,然后异步去调用play
最终得到了这样一个版本:
import { useEffect, useRef } from "react"
const playRef = useRef()
<div>
<video controls width="100%" ref={playRef}/>
</div>
// react hooks
useEffect(() => {
if (playRef && playRef.current && videoUrl) {
playRef.current.src = videoUrl
playRef.current.load() // 1. 先load
const playPromise = playRef.current.play(); // 2.再play
if (playPromise !== undefined) {
playPromise
.then(() => {
playRef.current.play()
})
.catch(() => {
playRef.current.pause()
});
}
}
}, [videoUrl])
参考: https://segmentfault.com/a/1190000019066679
另外: 本人用setTimeout 延时播放,并不能保证视频加载时长,控制台还是会提示错误, 因此采用了promise的回调函数处理