H5内联视频

时间:2022-05-22 18:42:38

概述

微信上很多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,其它都兼容的很好,移动端可以放心使用

内联视屏的控制

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

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