如果我们希望在一个
内播放
视频,我们可能会这么写:
// CSS:
video {width: 100%; height: auto;}
// HTML:
这在Android系统的手机中可以完美实现
视频在div元素内播放。然而在iPhone中,却只能全屏播放视频,不能在
中播放。这就尴尬了-_-|||。。。
为了避免iPhone下默认全屏播放视频, 可以设置
标签的 webkit-playsinline
属性为”true”
,如下。
对于iPhone APP中内嵌webView组件,还需要通过设置webView的 allowsInlineMediaPlayback
属性为true,触发视频行内播放。如下:
webView.allowsInlineMediaPlayback=YES;
一般iPhone浏览器都会默认设置 webView.allowsInlineMediaPlayback=YES;
,所以我们只需要在
元素中添加 webkit-playsinline
属性即可。
参考:
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/iAdJSProgGuide/PlayingVideosinAds/PlayingVideosinAds.html