iPhone Safari能否内联而不是全屏播放视频

这是客户提出的问题。希望看到类似这样的效果:

即,要在网页中内联播放,而不是全屏播放视频。

示例网页见这里

在iPhone的Safari下是否能达到这样的效果呢?

Android下的情况

先说下Android吧。

在Android的微信浏览器和本地浏览器(chrome)都没有问题。

这是Android微信浏览器的效果:

这是Android本地浏览器的效果:

iPhone下的情况

再说iPhone下的情况。

在微信浏览器中,iPhone6+可以内联播放(iPhone6还是全屏播放,估计是微信做了设置):

但,如果用Safari打开,就只能全屏播放。

那么,是不是Safari就完全不能内联播放了呢?也不是,如果我们将网页存放在Home Screen,再次打开,又可以内联播放了。

如这样:

内联播放需要的代码

说下原理,其实很简单,附上本文示例的代码:

1
<video id="tenvideo_video_player_0" width="100%" height="100%" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" src="http://123.125.86.26/vhot2.qqvideo.tc.qq.com/c0132zin0xa.m701.mp4?vkey=D144E53B2D8B6CAA48388218999B4F752F8643711476AD6B29E722AD4D0DF39A44CB0B1AA0D4CB8A2D2724341FE3A79EC1531409C3C7318E4BAEA4D7B9991A77555EE338C66BE2E2FB827CD63AEA56180F40E5596FAFEAE6&amp;br=29&amp;platform=2&amp;fmt=auto&amp;level=0&amp;sdtfrom=v3010"></video>

主要是设置了: webkit-playsinline="true"

微信浏览器使用了WebView API,为了支持内联,估计在objc代码中做了类似这样的设置:

1
webView.allowsInlineMediaPlayback = YES;