video兼容总结

视频属性

• poster="loadbg.jpg"　视频封面（安卓兼容不好，魅族 oppo 无法显示，出现黑屏。解决方法：视频兼容 01）
• preload="auto"属性规定在页面加载后载入视频
• x-webkit-airplay="allow"此视频支持ios的AirPlay功能
• x5-video-player-type="h5"　启用 H5 播放器,是 wechat 安卓版特性
• x5-video-player-fullscreen="true"　全屏设置，设置为 true 是防止横屏
• x5-video-orientation="portraint"　播放器支付的方向，landscape 横屏，portraint 竖屏，默认值为竖屏(ios 不起作用)
• webkit-playsinline="true"　这个属性是 ios 10 中设置可以让视频在小窗内播放，也就是不是全屏播放（在安卓上无效）
• playsinline="true"　 IOS 微信浏览器支持小窗内播放

视频兼容

• 控制视频的展示隐藏用 v-if；防止下拉刷新历史的时候视频重复初始化。
• ios10 以及以下和安卓一样无法自动播放视频，需要手动触发 play()事件，播放视频
• 安卓自带分享和小窗播放，和控制条：需 video 外加 div，div 全屏遮盖安卓的自带的控件。video 在全屏铺满 div； object-fit: contain;样式表示全屏按视频原比例铺满。因为 poster 在 android 兼容的并不好，不如在视频上层加个 div 铺张图片，这个比较好的处理方式应该是：视频上加一层 div 做封面，由于 android 不允许视频上层有东西，所以首先将视频设为的 width：1px，当播放后，上层的封面 remove 掉，同时 width：100%
  -4. 防止视频加载慢初始化会黑屏：打开视频时，先展示视频第一帧的图片，当视频加载完后，隐藏图片展示 video，此时用 v-show 控制，v-if 会找不到视频对象。
• android 微信内置浏览器采用腾讯 X5 内核，不遵循 X5web 标准。安卓浏览器、安卓 qq、安卓微信对 video 的支持不同。andriod 6.0 以上开始。小米手机等，就开始默认 video 标签。不会默认全屏播放。
• 安卓微信 x5-video-player-type="h5" playsinline="true" x-webkit-airplay="true" webkit-playsinline="true" preload="auto"

视频事件以及兼容

事件	IOS	Android
play	响应的是video.play()方法，并不代表已经开始播放	和iOS一样，仅是响应video.play()方法
canplay	视频元素渲染成功	和iOS一样
canplaythrough	有明确的缓冲，表示可以流畅播放了	视频会卡住，数据可能还没有开始加载；
playing	明确表示播放开始了	视频可能并没有开始播放
timeupdate	会有明确的进度变化，可以获取到currentTime	进度不一定变化，currentTime可能总是0，但是第一次有currentTime变化的timeupdate事件一定代表了视频开始播放了；
error	iOS中会有明确的错误抛出；	Android中某些浏览器会莫名其妙的抛出error
stalled	响应的是网络状况不佳，导致视频下载中断	在没有play之前，也可能会抛出该事件。