使用react-snap后视频无法自动播放

Question

我的React应用程序中有一个视频在后台运行。它运行完美，可以在页面加载时自动播放。

这是我使用的JSX代码。

tojson

使用 <video autoPlay loop style={{ backgroundImage: `url(${topVideoImage})`, }} muted playsInline > <source type="video/mp4" src={topVideo} /> </video> 后，它不会自动播放。 我的package.json看起来像这样：

react-snap

在我删除 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "postbuild": "react-snap", "test": "react-scripts test", "eject": "react-scripts eject" }, 之后，它可以工作。如何解决（自动播放视频）而不删除"postbuild": "react-snap",？

Answer 1

我找到了解决此问题的方法。 根据{{​​3}}，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中以编程方式使用Javascript将muted显式设置为true时，我也遇到了同样的问题。

考虑将.play()方法与以下任一或全部结合使用，而不是使用autoPlay属性。

1。 canplay event

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

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

2。 readyState attribute

如果下载了足够多的视频以开始播放而又不会遇到任何缓冲问题，则该视频的readyState属性的值将为4。

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