在移动端IOS上获取video视频的第一帧为黑屏 ；代码如下：
/**
* 获取视频的第一帧 来当做封面
* @param url 是该文件的base64格式 返回值也是base64格式 可以直接使用
*/
export function getVideoBase64(url) {
return new Promise(function (resolve, reject) {
let dataURL = ''; // 最终得到的第一帧图片
let width = '90'; // 截取图片的宽度 单位是px
let height = '90'; // 截取图片的高度 单位是px
let listen = 'loadeddata'; // 监听的是loadeddata事件
let video = document.createElement('video');
let canvas = document.createElement('canvas');
video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
video.setAttribute('src', url);
video.setAttribute('width', width);
video.setAttribute('height', height);
video.currentTime = 1; // 第一帧
video.preload = 'auto'; //metadata:抓取原数据
//判断是否是IOS设备 监听 durationchange或progress 在ios也会出现黑屏
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
video.load(); // 重新加载视频 解决在ios设备中 不会默认加载视频或音频资源的问题
video.autoplay = true; // 设置自动播放
video.muted = true; // 静音
listen = 'loadeddata'; // 当前帧的数据已加载 时触发
}
video.addEventListener(listen, () => {
console.log('监听到了listen:', listen);
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height); //绘制canvas
dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
resolve(dataURL);
});
});
}
运行结果及报错内容 : 在ios上面截出来的是黑色的
我的解答思路和尝试过的方法 ：我尝试监听durationchange或progress 事件 但截出来的也是黑色的
我想要达到的结果：用户上传视频后 能够正常截取视频的第一帧 当做视频的封面；
