h5 video 播放视频， 动态更改视频源，播放内容不变问题解决

播放视频时，快速切换视频源，在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的回调函数处理