如何在加载后停止在本机设备播放器中打开自动播放设置 <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'
}
视频在 desktop browsers 上按预期加载,并与网页一起显示 . 然而,在 mobile browsers 上,视频在本机播放器中以全屏模式打开之前加载到浏览器中 .
如何定义要在本机播放器中打开的移动设备上播放的视频?
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
MDN中的
video
属性(参见playsinline
):https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video