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