Video 实践运用

Video 实践运用

---

前两天做项目，遇到 video 标签的一些坑，查了些资料，这里分享给大家。时间宝贵，话不多说，直接进入正题。

一、video 标签内嵌播放：

video标签 添加属性 playsinline / webkit-playsinline 这个属性就为内嵌属性。

需要注意的是，有些webview不支持，导致 ios下不可以完美内嵌播放视频。
所以需要处理一下，代码如下：

var $video = document.getElementById("video"),
ua = window.navigator.userAgent.toLowerCase();
/* 判断是IOS，这里的条件根据实测情况修改 */
if (/iphone|ipad|ipod/.test(ua)) {
    window.makeVideoPlayableInline($video);
    webview.allowsInlineMediaPlayback = YES
}

二、video 自动播放

常用的属性：preload=”auto”
常用的方法：play()
常用的事件：loadstart、canplay、canplaythrough …

But , android始终不能自动播放。
ios 下监听“canplay”和“canplaythrough”（是否已缓冲了足够的数据可以流畅播放），在加载时不会主动去触发，必须在播放后才可以触发。
为了解决这个“公主病”，我们可以这样做：

在页面加载中先手动触发一下 => { play() }
然后立刻暂停 => { pause() }
再次播放时将播放时间置为 0 => { $video.currentTime = 0 }

微信中，也禁止视频自动播放（音频也不可以），
但是微信提供了 WeixinJSBridgeReady 事件，我们可以监听这个事件来实现视频的自动播放，微信中，Android 、Ios 都适用。

//也可以在这个事件触发后播放一次然后