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的回調函數處理