methods: {
/**
* 截取视频中的一帧作为缩略图
* @param url 视频地址
* @param type 1 获取缩略图 2 获取视频时长
* @param imgWidth 图片宽度
* @param imgHeight 图片高度
*/
getVideoImg(url, type = 1, imgWidth = 64, imgHeight = 64) {
return new Promise(function (resolve, reject) {
let dataURL = '';
let video = document.createElement('video');
video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
video.setAttribute('src', url);
if (type === 1) {
video.currentTime = 1; //指定帧数
video.setAttribute('width', imgWidth);
video.setAttribute('height', imgHeight);
}
// 元数据加载。当指定的音频/视频的元数据已加载时触发,元数据包括:时长、尺寸(仅视频)以及文本轨道
video.addEventListener('loadedmetadata', getImgOrTime);
// 视频下载监听。当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时触发
video.addEventListener('loadeddata', getImgOrTime);
// canplay:可播放监听。当浏览器能够开始播放指定的音频/视频时触发
video.addEventListener('canplay', getImgOrTime);
// stalled:当浏览器尝试获取媒体数据,但数据不可用时
video.addEventListener('stalled', function (e) {
reject(e);
});
// error:播放错误
video.addEventListener('error', function (e) {
reject(e);
});
function getImgOrTime(e) {
console.log(e.type);
// 获取缩略图
if (type === 1) {
let canvas = document.createElement('canvas'),
width = video.width, //canvas的尺寸和图片一样
height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height); //绘制canvas
const imageData = canvas.getContext('2d').getImageData(0, 0, width, height);
const arr = imageData.data;
let isValidity = false;
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 0 && arr[i] < 200) {
isValidity = true;
break;
}
}
dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
console.log('图片是否有效', isValidity);
resolve(dataURL);
}
// 获取视频时长
if (type === 2) {
resolve(video.duration); //得到时长为秒,小数,182.36
}
}
});
}
}
Canvas获取视频缩略图、时长
最新推荐文章于 2024-07-08 10:03:30 发布