H5 video使用总结

相信作过h5视频需求的同窗们都会很头疼，在产品及运营同窗“不就是在手机上播放一段视频么？”的简单想法下，咱们却遇到了ios、安卓的各类封面不兼容、进度条展现、全屏播放、进度等等各类问题。下面是我在作一些video相关项目的一些总结。

1.封面问题
video标签提供了poster属性来展现封面图。可是在一些安卓手机下，该属性兼容性太差，各类展现黑屏。
这里能够考虑在视频上层添加一个div来嵌入一张图片。
能够采用poster属性。可是在android下，兼容性太差。能够考虑在视频上层加一个div图片。视频播放是显示video，隐藏该图片便可。
可是通过测试，发现先隐藏video，再展现video时，会出现闪屏现象。这个是由于video为display:none时，video是属于未激活状态。当从新设置display:block时，video被激活。所以会出现闪屏。
这里建议将视频设置宽度为1px。当播放时，能够将封面隐藏，再将视频的width设置成100%;

2.全屏播放
ios全屏下全屏能够添加如下属性 playsinline="" webkit-playsinline=""
安卓全屏下能够利用 x5-video-player-type="h5" 腾讯x5内核系的android微信和手Q内置浏览器webview内核，再设置x5-video-player-fullscreen="true" 启用全屏

3.自动播放
andriod下是不容许自动播放的，即便用了video.play()，必需要用户主动出发，能够在用户出发滑屏或者touch的时候，用video.play()自动播放，建议能够在页面中加一个loading页，加一个缓冲按钮，触发用户播放视频
再者，利用微信提供的WeiXinJsBridgeReady，在微信嵌入webview全局事件出发后，视频能够自动播放，可是手Q和其余浏览器仍是须要手动触发

document.addEventListener("WeiXinJsBridgeReady",function(){
    video.play();
})

4.视频的缓冲及播放问题
4.1视频的缓冲
video的bufferd属性能够返回TimeRanges对象，表示用户的视频缓冲范围。不过缓冲会返回多个对应，应该以最后一个返回对象为准。
video.duration表示视频的总时长。
二者相比便可获得视频的缓冲进度，即 video.buffered.end(video.buffered.length-1)/video.duration
4.2视频的播放
当浏览器正在下载指定的音频/视频时，会发生 progress 事件；
当浏览器可以开始播放指定视频时，会触发canplay事件；
当浏览器预计可以在不停下来进行缓冲的状况下持续播放指定的音频/视频时，会触发 canplaythrough 事件。

5.视频衔接
咱们在在视频相关的需求时，可能须要播放不止一段视频。这里通常有两种解决方案：
a.将全部的视频衔接在一块儿，经过video的currentTime来切换换面(这样会有两个问题。1.视频过大，2.视频更新不方便)
b.经过src来切换视频

1.video在切换src时会有短暂的黑屏现象，能够用静态图片来过渡切换过程。
2.在忽然切换src的时候视频会缓冲视频显得不流畅。这里能够设置两个video标签。利用4.1中的缓冲进度，当第一视频缓冲完成以后，能够设置第二个视频开始缓冲。这样能够保证用户在切换视频时流畅效果会好一点。