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; }
值得一提的是:
- object-fit属性不仅可用于video元素,其实它可以用于任何元素。
- object-fit属性不兼容ie,其它都兼容的很好,移动端可以放心使用。
内联视屏的控制
内联元素的播放可以通过timeupdate 和 ended这两个事件来控制,它的进度则可以用currentTime来获取或者控制。示例如下:
video.addEventListener('timeupdate', function (e) {
console.log(video.currentTime) // 当前播放的进度
})
video.addEventListener('ended', function (e) {
// 播放结束时触发
})