h5 video 移动端使用记录
近期，公司产品需要做一次升级，升级内容中就包括要做产品的解读视频，来展示产品的特殊性。借此机会，研究了下H5的标签Video。
附上效果：
Video常用的属性有src、poster、preload、autoplay、loop、controls、width、height
1、src 和 poster
src用于指定视频的地址；poster用于指定一张图片，在当前视频数据无效时显示，可当作一张预览图。视频数据无效可能是视频正在加载或视频地址错误。
2、preload
用于定义视频是否预加载，属性有三个可选择的值：none、metadata、auto，默认为auto。
- none：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
- metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
- auto：全部预加载。
3、autoplay
用于设置视频是否自动播放，当出现表示自动播放，去掉是表示不自动播放。
4、loop
用于指定视频是否循环播放，同样是一个布尔属性，出现即表示循环反之则不播放。
5、controls
用于需要浏览器启用本身的播放控制栏，控制栏包括播放暂停控制，播放进度控制，音量控制
6、source标签
用于指定多个可选择的（浏览器最终只能选一个）视频文件地址，且只能在媒体标签没有使用src属性时使用。
浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。
此标签包含 src、type、media 三个属性。
src属性：用于指定媒体的地址，和video标签的一样。
type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。
webkit-playsinline playsinline：视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。
是想做全屏直播或者全屏H5体验的用户，ios需要删除 webkit-playsinline 标签，android则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放。
x5-video-player-type：启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在android（包括微信）上生效，暂时不支持iOS。
x5-video-orientation：声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，这个属性需要x5-video-player-type开启H5模式
android的微信可能加上了上面的属性，还会出现上下有黑边，不能全屏的问题,需要给video加上object-fit: fill;的style属性。
ios黑屏问题
ios 在播放视频时，会出现短暂的黑屏，然后正常播放
在视频上层覆盖一个div并用一张视频第一帧图片来填充，制造播放前加载假象。然后监听事件 timeupdate ，视频播放有画面时移除这个div
var videoWindow = document.querySelector(".video-window")
var posterImg = document.querySelector(".video-poster")
document.getElementById("page-video").addEventListener('timeupdate', function(e) {
if(document.getElementById("page-video").currentTime > 0.1){
posterImg.remove();
}
})
一个完整的例子：