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中的缓冲进度，当第一视频缓冲完成之后，可以设置第二个视频开始缓冲。这样可以保证用户在切换视频时流畅效果会好一点。