0

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

这是我使用的代码 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？

4

2 回答 2

0

我找到了解决这个问题的方法。据此，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>)
}
于 2019-12-01T17:30:04.903 回答
0

muted即使在 JSX 中显式设置为 true 以及以编程方式使用 Javascript时，我也遇到了同样的问题。

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

1.canplay事件

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

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

2.readyState属性

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

if(elt.readyState > 4){
  elt.play()
}
于 2020-04-08T15:02:26.643 回答