视频属性
  • 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之前，也可能会抛出该事件。