在打开本机播放器的移动设备上停止 <video>答案

【问题标题】：Stop <video> on mobile device opening native player在打开本机播放器的移动设备上停止 <video>
【发布时间】：2018-10-29 18:13:09
【问题描述】：

加载后如何阻止设置了自动播放的<video> 在本机设备播放器中打开？

在 React 组件中，我通过

添加视频

return (
  <video style={{objectFit: 'cover', width: '100%', height: '80vh'}} id="background-video" loop muted autoPlay>
     <source src={this.state.videoURL} type="video/mp4" />
     <source src={this.state.videoURL} type="video/ogg" />
  </video>
)

视频src定义为

this.state = {
    videoURL: '//videos.ctfassets.net/1lmibopww0w9/5U4jOdHuRq62cygeyokaW6/f5444869997a7297f19ea847ccb16ae9/Black_Sands.mp4'
}

视频在桌面浏览器上按预期加载并与网页一起放置。然而，在移动浏览器上，视频会先在浏览器中加载，然后在原生播放器中全屏打开。

如何定义视频在移动设备上播放并在原生播放器中打开？

【问题讨论】：

标签： javascript reactjs html5-video

【解决方案1】：

iOS 和 Android 有内嵌视频的政策。

在这两种情况下，它们只允许自动播放没有音轨或静音的视频。

我会将muted、autoPlay 和playsinline 属性添加到video 标记。

更多信息：

iOS 的新视频政策：https://webkit.org/blog/6784/new-video-policies-for-ios/
Android 中的静音自动播放：https://developers.google.com/web/updates/2016/07/autoplay
video MDN 中的属性（参见 playsinline）：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

【讨论】：

谢谢。对于那些添加到 React playsinline 的人来说，一件事是 playsInline。