H5内联视频

概述

微信上很多H5页面都会有会动的像视屏的页面，这样的效果很棒。从技术上来说，这个其实就是视屏，不过没有控制播放的按钮罢了。它们还有一个专业的名字——内联视频。下面我把自己对内联视屏的学习记录下来，供以后开发时参考，相信对其他人也有用。

内联视屏的实现

目前内联视屏只能在ios端和微信浏览器（QQ浏览器内核）里面实现。

在ios端，只需要给video加上playsinline属性就能使它内联播放，代码如下：

<video id="video" x-webkit-airplay="allow" webkit-playsinline playsinline src="video.mp4"></video>

在微信端，QQ浏览器内核对video做了优化，使它能够支持内联播放，只需要加上x5-video-player-type和x5-video-player-fullscreen属性即可。实例如下：

<video id="video" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" webkit-playsinline playsinline src="video.mp4"></video>

这样就实现了video在ios端和微信端的内联播放。(注意不要写controller，不然会出现控制条)

内联视屏全屏播放

对于video类元素，我们把它的宽高都设置为100%会没有效果，如果屏幕尺寸和视屏本身的尺寸不相同的话，屏幕底部或者边上都会有黑块。那么怎么让视屏铺满屏幕呢？

方法是利用object-fit属性，它就和background-size一样，能够使元素平铺。代码示例如下：

//对应background-size: 100% 100%;
.fill { object-fit: fill; }

//对应background-size: contain;
.contain { object-fit: contain; }

//对应background-size: cover;
.cover { object-fit: cover; }

//用户不大
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

值得一提的是：

1. object-fit属性不仅可用于video元素，其实它可以用于任何元素。
2. object-fit属性不兼容ie，其它都兼容的很好，移动端可以放心使用。

内联视屏的控制

内联元素的播放可以通过timeupdate 和 ended这两个事件来控制，它的进度则可以用currentTime来获取或者控制。示例如下：

video.addEventListener('timeupdate', function (e) {
console.log(video.currentTime) // 当前播放的进度
})
 
video.addEventListener('ended', function (e) {
// 播放结束时触发
})