纯前端播放文件流视频并预览并截取视频第一帧-Toy模板网

这篇具有很好参考价值的文章主要介绍了纯前端播放文件流视频并预览并截取视频第一帧。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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;
},

2、截取视频第一帧

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

注释：canvas.toDataURL(type, encoderOptions)中type为图片格式，encoderOptions为图片质量（取值为0-1），图片格式为png图片相对会大一些，如果图片为jpeg那么图片相对会小很多，图片为jpeg转换成base64长度会小很多，当然图片质量越小base64长度也会越小。文章来源地址https://www.toymoban.com/news/detail-408074.html

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);
        });
    })
}