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

时间:2018-05-19 13:46:29

标签: javascript reactjs html5-video

如何在加载后停止在本机设备播放器中打开自动播放设置的<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'
}

视频会在桌面浏览器上按预期加载,并与网页一起显示。然而,在移动浏览器上,视频会在本机播放器中全屏打开之前加载到浏览器中。

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

1 个答案:

答案 0 :(得分:1)

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

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

我会将mutedautoPlayplaysinline属性添加到video代码。

更多信息: