iphone html5直播,【小技巧】解决iPhone中video视频的行内播放

如果我们希望在一个

内播放

视频,我们可能会这么写:

// 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