【小技巧】解决iPhone中video视频的行内播放
如果我们希望在一个 <div>
内播放 <video>
视频，我们可能会这么写：
// CSS:
video {width: 100%; height: auto;}
// HTML:
<div style="width: 500px; height: 300px;">
<video src="test.mp4" controls></video>
</div>
这在Android系统的手机中可以完美实现 <video>
视频在div元素内播放。然而在iPhone中，却只能全屏播放视频，不能在 <div>
中播放。这就尴尬了-_-|||。。。
为了避免iPhone下默认全屏播放视频，
可以设置 <video>
标签的 webkit-playsinline
属性为”true”
，如下。
<div style="width: 500px; height: 300px;">
<video src="test.mp4" controls webkit-playsinline="true"></video>
</div>
对于iPhone APP中内嵌webView组件，还需要通过设置webView的 allowsInlineMediaPlayback 属性为true，触发视频行内播放。如下：
webView.allowsInlineMediaPlayback=YES;
一般iPhone浏览器都会默认设置 webView.allowsInlineMediaPlayback=YES;
，所以我们只需要在 <video>
元素中添加 webkit-playsinline
属性即可。
参考：
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/iAdJSProgGuide/PlayingVideosinAds/PlayingVideosinAds.html
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
