获取视频video第一个帧的图片作为视频的背景图片
一般情况下,Android版本可自动获取视频的第一帧作为视频的背景图片,但ios是无法获得的,只能手动为其添加视频的背景图片。
制作这第一帧图片我使用的原理:拿到视频播放路径后,创建一个video标签,将路径传给src,使其自动播放时,截取展示的第一个图片,使用canvas将其画出来,
1、设置video背景图片的属性
在video中属性很多,为视频设置背景图片的属性为:poster,该属性的值就为图片的路径
2、上传本地视频,获取视频的宽高及播放长度等
通过loadeddata事件或onloadedmetadata事件 ,使用具体如下:
video.onloadedmetadata = function () {
const vLength = video.duration; //视频播放的长度
console.log('vLength', vLength);
imgWith = video.videoWidth;//视频播放的宽度
imgHeight = video.videoHeight; // 视频播放的高度
};
// 或者
video.addEventListener('loadeddata', function () {
const vLength = video.duration; //视频播放的长度
console.log('vLength', vLength);
imgWith = video.videoWidth;//视频播放的宽度
imgHeight = video.videoHeight; // 视频播放的高度
});
// 使用loadeddata 也是类似用法
3、实际代码操作
// 我在hooks下写的
const getVideoBase64 = (url) => {
return new Promise(function (resolve) {
let dataURL = '';
const video = document.createElement('video');
video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
video.setAttribute('src', url);
video.setAttribute('preload', 'auto');
video.addEventListener('loadeddata', function () {
const canvas = document.createElement('canvas');
console.log('video.clientWidth', video.videoWidth);// 视频宽
console.log('video.clientHeight', video.videoHeight); // 视频高
const width = video.videoWidth || 400; // canvas的尺寸和图片一样
const height = video.videoHeight || 240;// 设置默认宽高为 400 240
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height); // 绘制canvas
dataURL = canvas.toDataURL('image/jpeg'); // 转换为base64
resolve(dataURL);
});
});
};
//调取getVideoBase64 获取图片的路径
// 利用async...await...来进行获取
const getImgFun = async() =>{
const videoUrl = '' // 视频播放的路径
const video = document.getElementById("video") //获取视频标签
const urlImg = await getVideoBase64(videoUrl) //获取视频播放路径
video.setAttribute('poster',urlImg)//给视频video属性poster设置值图片路径,即为视频展示的背景图片
}