首先需要新建video标签，用于放置需要截取的视频文件，然后Js获取video标签并监听它的 loadeddata 事件，这里简单说下video的事件有哪些？为什么使用loadeddata来获取第一帧。

video的事件

video.addEventListener('loadeddata', consoleString.bind(video, 'loadeddata')) // 当前帧加载完毕
video.addEventListener('loadedmetadata', consoleString.bind(video, 'loadedmetadata')) // 视频元数据加载完毕
video.addEventListener('canplay', consoleString.bind(video, 'canplay')) // 视频缓冲能够开始播放
video.addEventListener('timeupdate', consoleString.bind(video, 'timeupdate')) // 播放位置发生改变时
video.addEventListener('play', consoleString.bind(video, 'play')) // 开始播放时
video.addEventListener('waiting', consoleString.bind(video, 'waiting')) // 要播放下一帧而需要缓冲时
function consoleString(string) {
  console.log(string)
}

执行结果：

// 执行结果
// timeupdate 
// loadedmetadata 
// loadeddata 
// canplay 
// play（开始播放）
// 没有waiting, 因为视频较小不需要缓冲

虽然第一个被触发执行的是timeupdate事件，但是此时视频文件尚未加载，截取的是canvas的无内容本身。如果通过该事件来获取，则容易截取黑屏。而loadeddata为媒体当前播放位置的帧完成加载时触发该事件， 通常才是第一帧。

javascript截取视频第一帧代码实现如下：

html：

<input type="file" id="upload-ipt" @change="chooseVideo" accept="video/*" />
<div id="box" style="display:none"></div>

js：

chooseVideo(e) {
    var that = this;
    var obj_file = document.getElementById("upload-ipt");
    var file = obj_file.files[0];
    var blob = new Blob([file]), // 文件转化成二进制文件
          url = URL.createObjectURL(blob); //转化成url
    var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
    $("#in-box").html($video);
    var videoElement = $("video")[0];
    videoElement.addEventListener("canplay", function(_event) {
        var canvas = document.createElement("canvas");
        canvas.width = videoElement.videoWidth;
        canvas.height = videoElement.videoHeight;
        canvas.getContext("2d").drawImage(videoElement, 0, 0, canvas.width, canvas.height); 
        console.log(canvas.toDataURL("image/png")); //第一帧图片url
    })
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/9640