js获取视频的第一帧图片并上传和视频时长

项目中要求上传视频的时候要自动获取第一帧作为App端的视频播放封面。

1、获取视频的第一帧封面

captureImage() {
    let that = this;
    // 创建视频对象
    let video = new Video();
    video.width = 200;
    vieo.height = 500;
    video.setAttribute('crossOrigin'， 'Anonymous');
    video.setAttribute('controls', 'controls');
    video.setAttribute('autoplay', 'autoplay');
    video.volume = 0;
    video.setAttribute('src', url); // 视频的链接
    video.addEventListener('loadeddate', function() {
        // 创建canvas画布
        let canvas = document.createElement('canvas');
        canvas.width = video.width;  // 设置画布的长宽也就是图片的长宽
        canvas.height = video.height;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        let img = document.createElement('img');
        img.setAttribute('crossOrigin', 'Anonymous');
        img.src = canvas.toDataURL('image/png');
        let name = img.src.substring(img.src.lastIndexOf("/") + 1, img.src.length);
        that.dataURLtoFile(img.src, name);
    })
}

2、上传视频第一帧图片

dataURLtoFile(dataurl, filename) {
    let arr = data.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr = bstr.charCodeAt(n);
    }
    let file = new File([u8arr], filename, {type: mime});
    // 后面就是你上传图片的接口
}