如果我们希望在一个<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

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/html/1231