React 背景视频无法在移动设备上播放

Question

我一直在寻找有关如何解决无法在移动设备上播放的 html5 视频的许多答案，但大多数人建议包括 mute 或 playsinline。目前，我的背景视频在计算机上播放得非常好，但在任何移动浏览器上仍然无法播放。事实上，什么都没有加载，只显示一个空白页面。

<div className="fullscreen-video-wrap">
  <video playsinline loop autoPlay muted autobuffer poster="./media/bg.jpg">
      <source src={require("./media/web-720cmp.mp4")} type="video/mp4" />
      <source src={require("./media/web-720cmp.webm")} type="video/webm" />
      <source src={require("./media/web-720cmp.ogv")} type="video/ogg" />
      <img src={require("./media/bg.jpg")} alt=""/>
      Your browser does not support the video tag. I suggest you upgrade your browser.
  </video>            
</div>

Answer 1

问题

看起来像muted doesn't work right when using the video tag with react。视频在移动设备上自动播放需要静音属性。

如果您在浏览器中检查网页的 html，您应该会在视频标签中看到类似这样的内容。注意没有 muted 属性。也没有自动缓冲或内嵌播放

<video loop="" autoplay="" poster="/media/bg.jpg">
    <source src="/media/web-720cmp.mp4" type="video/mp4">
    <source src="/media/web-720cmp.webm" type="video/webm">
    <source src="/media/web-720cmp.ogg" type="video/ogg">
    <img src="/media/bg.jpg" alt="">
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

解决方案

React 应该可以解决这个问题，在此之前你可以使用名为 dangerouslySetInnerHTML 的东西在你的代码中插入一个 html 块。它看起来像这样

  <div className="fullscreen-video-wrap" dangerouslySetInnerHTML={{ __html: `
    <video playsinline loop autoPlay muted autobuffer poster="./media/bg.jpg">
    <source src="${require('./media/web-720cmp.mp4')}" type="video/mp4" />
    <source src="${require('./media/web-720cmp.webm')}" type="video/webm" />
    <source src="${require('./media/web-720cmp.ogg')}" type="video/ogg" />
    <img src="${require('./media/bg.jpg')}" alt=""/>
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>            
` }}></div>