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的实例对象，其他操作都跟文档类似
🍈 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'}
]);
