转载

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

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

原文 http://www.dengzhr.com/frontend/html/1231

正文到此结束

所属分类：编程技术

本文标签： https HTML 希望 ip App IO web Apple http CSS src IDE lib UI Developer Document js Android id
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二