在iOS设备上开发H5活动时，遇到video元素在自动加载和播放上的挑战。苹果默认禁止视频自动加载和播放，但可通过设置webview属性mediaPlaybackRequiresUserAction来启用自动播放。对于iOS 10及以上版本，无音频或静音的视频可以自动播放，同时使用playsinline属性实现内联播放。为了解决预加载问题，需要在页面加载后调用video.load()。此外，autoplay配合playsinline属性可在可视区域内自动播放，而调用video.play()则没有位置限制。
最近在做H5活动开发的时候，遇到了使用video播放动效的需求，但是在ios端遇到了一系列问题，费了半天劲才解决，所以来搞个总结。
问题：IOS中视频无法自动加载、自动播放、播放会调起全屏播放器
苹果默认禁止了视频的自动加载以及自动播放，必须处于用户主动操作，如点击视频播放按钮或者出发点击事件。但是给ios开发者提供了选项，只需要在App的webview设置mediaPlaybackRequiresUserAction 属性之后就可以启动自动播放。
首先提一下video的preload属性，规定是否预加载视频，可能的值有以下几种：
auto - 当页面加载后载入整个视频
metadata - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
不设置的话，默认值会根据不同浏览器的定义。
我在代码中尝试了以上的三种值，在页面加载完成发现都没有进行视频的加载，原因不明，最后解决方式是通过调用video.load()在页面加载完成之后主动load视频。
ios10允许自动播放那个的视频有以下两种：无音轨视频或者无声音视频(设置muted属性)，这两种视频无需用户主动操作，可以通过设置autoplay或者video.play()来自动播放，另外通过设置autoplay来自动播放的视频必须出现在可视区内，但是调用video.play()则没限制。
ios10允许video通过设置playsinline来进行内敛播放，但是需要ios开发者在webview中设置allowsInlineMediaPlayback属性来开启。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
