前端视频

video 标签属性

• src 视频的 URL

• autoplay 是否自动播放

• controls 是否显示控件

• width 视频播放器的宽度（只支持像素，不支持百分比，如width:100px或者width:100）

• height 视频播放器的高度（只支持像素，不支持百分比，如height:100px或者height:100）

• poster 视频封面 (规定视频正在下载时显示的图像)

• loop 是否循环播放

• muted 视频的音频输出为静音。

• preload 预加载 (视频在页面加载时进行加载，并预备播放)，值：auto、metadata、none

• disablePictureInPicture 禁用 video 元素的画中画特性

video 标签支持 HTML 的全局属性。如：id、style、hidden
video 标签支持 HTML 的事件属性。如：onload

兼容性属性

X5属性

X5是腾讯基于Webkit开发的浏览器内核，应用于Android端的微信、QQ、QQ浏览器等应用。 它提供了一种名叫「同层播放器」的特殊video元素以解决遮挡问题。

• 启用同层 H5 播放器 x5-video-player-type="h5"

x5-video-player-type="h5" 解决了视频层级过高的问题，但出现了点击播放自动进入全屏的问题，因此还需要监听x5的全屏事件进行适配
x5-video-player-type="h5-page" 解决了视频层级过高的问题，视频播放不会立即进入全屏状态

• 视频播放时将会进入到全屏模式 x5-video-player-fullscreen="true"

• 横竖屏 x5-video-orientation="landscape|portrait"

landscape 横屏，portrain 竖屏； 默认竖屏 此属性只在声明了x5-video-player-type="h5"情况下生效

跟随手机自动旋转 <video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

其它兼容性属性

• 允许 airplay（通过 AirPlay 可以把当前的视频投放到支持此技术的其他设备上。） x-webkit-airplay="allow"

• 小窗播放(同层播放)

webkit-playsinline="true" 这个属性是 ios 10 中设置可以让视频在小窗内播放，也就是不是全屏播放
playsinline="true" IOS微信浏览器支持小窗内播放
使视频不脱离文本流，但是需要 webview（allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES），
现在结果是苹果支持，安卓不支持。安卓播放会全屏。

兼容性问题

• 在Android的微信里面，就算加上了上面的属性，还会出现上下有黑边，不能全屏的问题。

解决办法：给video加上object-fit: fill;的style属性。如果还是有黑边有可能是视频尺寸不合适。