使用 react-snap 后視頻不會自動播放

Question

我的 React 應用程序在后台運行了一段視頻。 它完美運行並在頁面加載時自動播放。

這是我使用的代碼 JSX。

  <video
    autoPlay
    loop
    style={{
      backgroundImage: `url(${topVideoImage})`,
    }}
    muted
    playsInline
  >
    <source type="video/mp4" src={topVideo} />
  </video>

我使用react-snap后它不會自動播放。 我的 package.json 看起來像這樣：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "react-snap",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

它在我刪除"postbuild": "react-snap", 。 如何在不刪除react-snap情況下解決（加載時自動播放視頻）？

Answer 1

我找到了解決這個問題的方法。 根據這個靜音現在需要的鉻自動播放在加載視頻。 我們可以使用muted屬性靜音視頻但是react-snap現在不再處理了。 所以我們必須手動將muted屬性設置為true 。

為此，我使用了這個簡單的 hack。

const makeMuted = (elt) => {
  if (elt) {
    elt.muted = true;
  }
};
export const LandingPage = (props) => {
     return ( <video
        id="background-video"
        autoPlay
        loop
        ref={makeMuted}
        playsInline
      >
        <source type="video/mp4" src={topVideo} />
      </video>)
}

Answer 2

即使在 JSX 中將muted顯式設置為 true 以及以編程方式使用 Javascript 時，我也遇到了同樣的問題。

不要使用autoPlay屬性，而是考慮將.play()方法與以下任一或兩者結合使用。

1. canplay活動

一旦下載了足夠的視頻開始播放，視頻的canPlay事件就會觸發，而不會遇到任何緩沖問題。

elt.addEventListener("canplay", () => {
  elt.play();
})

readyState屬性

如果已下載足夠的視頻以開始播放，而不會遇到任何緩沖問題，則視頻的readyState屬性的值為 4。

if(elt.readyState > 4){
  elt.play()
}