h5のvideo踩坑

video 是 h5 新增的标签，可以通过 video 标签播放 ogg、mp4 、webm 等格式的视频。

🌽 video 自带属性

🍅 video 第三方属性

微信 video 标签的私有属性

x5-video-player-type='h5'

启用同层播放，取值固定为'h5'

注：这个属性需要在播放前设置好，播放之后设置无效，下面的 x5-video-player-fullscreen 也是一样

x5-video-player-fullscreen

是否全屏，取值为 true 或 false

x5-video-orientation

视频方向，取值分别为 landscape 、portrait 或者 landscape|portrait ，分别对应横屏、竖屏及自动旋转

在微信浏览器还可以监听到进入全屏和退出全屏的事件，分别是 x5videoenterfullscreen 和 x5videoexitfullscreen，可以针对做一下视频播放位置做处理

x5 内核更多相关的使用记录，可以查看 X5 同层播放器试用报告

🍆 ios 实现内联播放

为了使视频能小窗播放，只需要在 video 标签加入 playsinline 和 webkit-playsinline （不需要赋值，存在即为 true），但是此功能只支持 ios，安卓默认全屏，效果如下

ios 独有的属性还有 airplay 和 x-webkit-airplay 属性是用来配置 ios 的网页视频是否支持 airplay 功能，取值分别为 'allow' 和 'deny'，测试了貌似没效果

🍔 videojs

video.js是一款基于 HTML5 的网络视频播放器。它支持 HTML5 和 Flash 视频,以及 YouTube 和 Vimeo(通过插件)。支持在桌面和移动设备上播放视频。

由于浏览器不同厂商的实现机制不一样，界面不一致，移动端更是层出不穷，所以为了统一界面和操作，选用这个历史悠久的视频播放插件来实现效果，目前我司技术栈主要是 vue 全家桶，所以为了方便使用，特地做了一下封装，具体 github 地址 ⭐️ vue-videojs ⭐️

npm install video.js vue-videojs

使用方法如下

<v-video
  ref="video"
  width="600"
  height="400"
  poster="//vjs.zencdn.net/v/oceans.png"
  class="video-js"
  webkit-playsinline
  playsinline
  x-webkit-airplay="allow"
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint"
  controls
  :sources="videos"
  :options="playOpts.options"
  @ready="videoReady"
  @ended="videoEnd"
></v-video>

在 reday 回调方法里，可以通过  this.$refs.video.videojsObject;  来获取 videojs 的实例对象，其他操作都跟文档类似

以下分别是 PC 端，ios，android 下面的运行效果

🍈 videojs 的文档

var player = videojs("my_player_id");
 
//  获取封面和设置封面
console.log(player.poster());
player.poster("//example.com/poster.jpg");
 
// 获取资源
console.log(player.currentSrc());
 
// 更新资源
player.src({ src: "//example.com/video.mp4", type: "video/mp4" });
 
// 更新多个资源
player.src([
  { src: "//example.com/video.m3u8", type: "application/x-mpegURL" },
  { src: "//example.com/video.mp4", type: "video/mp4" },
]);