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加载到浏览器中后检查该网页的html，则应该可以看到视频标签看起来像这样。请注意，没有静音属性。也没有自动黄油或在线播放

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

解决方案

反应可能应该解决此问题，直到您可以使用名为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>

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

1 个答案: