使用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

我找到了这个问题的解决方案。根据this的说法，chrome现在需要静音才能在加载时自动播放视频。我们可以使用muted属性将视频静音，但react-snap现在不再处理。因此，我们必须手动将muted属性设置为true。

为此，我使用了这个简单的技巧。

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编程时也是如此。

考虑将.play()方法与以下两种方法中的一种或两种结合使用，而不是使用autoPlay属性。

1. canplay event

一旦下载了足够的视频开始播放，视频的canPlay事件就会触发，而不会遇到任何缓冲问题。

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

2. readyState attribute

如果已经下载了足够多的视频以开始播放，并且不可能遇到任何缓冲问题，则视频的readyState属性的值将为4。

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