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

🌽 video自带属性

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

🍅 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下面的运行效果

pc-video

🍈 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'}
]);