背景
公司一个需求，在微信端放入介绍视频。
方案
-
video 元素标签
我们都知道微信浏览器采用的是QQ浏览器的X5内核，下面是对x5内核的处理，video 标签上加入了一些特定的属性。
<video
controls="false"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
poster="https://static.jdip.cn/fxe-livingqrcode/images/rule/fxeLivingqrCodeRule.png"
src="https://static.jdip.cn/fxe-livingqrcode/video/fxeLivingqrCodeRule.mp4"
/>
下面我们来解读下里面的属性：
| 属性名 | 分类 | 说明 |
|---|---|---|
| controls | video 原生 | 如果出现该属性，则向用户显示控件，比如播放按钮。布尔类型 |
| playsinline | video 原生 | playsinline 表示进度条是否可拖拉，布尔类型 |
| x-webkit-airplay | video 原生 | 是否支持airplay(隔空播放), 连接设备时可用，可选：allow |
| x5-playsinline | x5 内核 | 视频限定于网页内部播放 |
| x5-video-player-type | x5 内核 | 启用H5播放器,是wechat安卓版特性 |
| x5-video-player-fullscreen | x5 内核 | 在x5内核下自动全屏播放 |
| x5-video-orientation | x5 内核 | 声明播放器支持的方向，可选值landscape 横屏,portraint竖屏。默认值portraint |
- video.js 插件库
