共计 1193 个字符,预计需要花费 3 分钟才能阅读完成。
写在前边:因为我的项目是用 vue.js 框架实现,所以以下代码是 vue.js 语法。
首先,看一下 Dom 元素(video 相干属性和事件):
<video
@loadeddata="createPreImg($event)" // loadeddata 事件示意 media 中的首帧曾经加载
class="content-video"
:src="item.videoUrl" // 视频地址(能够是以后域下的,也能够是其余域下的)crossorigin="anonymous" // 容许跨域(因为浏览器的同源策略,如果视频是其余域,须要设置此属性)preload="auto" // 预加载(挪动端须要设置此属性,因为挪动端有很多播放限度,很多都不会主动加载)></video>
其次,是 javascript 局部代码:
createPreImg(event) { // event js 原生事件
const videoEle = event.target; // 以后 video dom 节点
videoEle.currentTime = 1; // 设置视频开始播放工夫(因为有些手机第一帧显示黑屏,所以这里选取视频的第一秒作为封面)videoEle.addEventListener('canplay', function () { // 监听 video 的 canplay 事件
// 创立 canvas 元素 并设置 canvas 大小等于 video 节点的大小
const canvas = document.createElement('canvas');
const scale = 0.8; // 压缩系数
canvas.width = videoEle.videoWidth * scale;
canvas.height = videoEle.videoHeight * scale;
// canvas 画图
canvas.getContext('2d').drawImage(videoEle, 0, 0, canvas.width, canvas.height);
// 把 canvas 转成 base64 编码格局
const imgSrc = canvas.toDataURL('image/png');
// 创立 img 元素 插入到文档中
const img = document.createElement('img');
img.src = imgSrc;
img.style.position = 'absolute';
img.style.left = '0';
img.style.top = '0';
img.style.objectFit = 'cover';
videoEle.parentNode && videoEle.parentNode.appendChild(img);
});
}
通过测试,在小米手机 Mix2 机型上,能够展现封面;
倡议 :因为挪动端手机机型泛滥,视频在挪动端的播放限度也比拟多,所以封面的解决最好放在服务端解决,以缩小不同机型兼容性带来的问题。
正文完