纯前端播放文件流视频并预览并截取视频第一帧

纯前端播放文件流视频并预览并截取视频第一帧

1、把文件流转为本地可以播放地址

调用getFileURL并传入文件流会返回一个地址，将地址赋值给video的src即可播放视频，无需上传至服务器。

getFileURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
},
1
2
3
4
5
6
7
8
9
10
11

2、截取视频第一帧

调用getVideoBase64并将第一步得到的url转给getVideoBase64即可得到视频第一帧图片，getVideoBase64返回的片为base64格式。

注释：canvas.toDataURL(type, encoderOptions)中type为图片格式，encoderOptions为图片质量（取值为0-1），图片格式为png图片相对会大一些，如果图片为jpeg那么图片相对会小很多，图片为jpeg转换成base64长度会小很多，当然图片质量越小base64长度也会越小。

getVideoBase64(url) {
    return new Promise(function(resolve, reject) {
        let dataURL = '';
        let video = document.createElement("video");
        video.setAttribute('crossorigin', 'anonymous'); //处理跨域
        video.setAttribute('src', url);
        video.setAttribute('width', 222);
        video.setAttribute('height', 148);
        video.setAttribute('controls', 'controls');
        video.currentTime = 1  //视频时长，一定要设置，不然大概率白屏
        video.addEventListener('loadeddata', function(e) {
            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
            dataURL = canvas.toDataURL('image/jpeg',0.3); //转换为base64
            var img = document.createElement("img");
            img.src = dataURL
            video.setAttribute('poster', dataURL);
            resolve(dataURL);
        });
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25