video视频关键帧截取

hello!好久没有更新了！今天来聊聊视频的关键帧截取，和指定关键帧的截取并显示为缩略图。

好的，我知道有的同学肯定比较着急，直接上硬菜

// 视频播放js
/**
    [email protected] （为.MP4的视频链接）
    调用方式 videoPlaying(url).then(res=>{
                // 这里就可以获取到你想要的视频帧图片
                console.log(res)
            })
*/
export const videoPlaying = function (url) {
    // 第一步先创建video标签
    let video = document.createElement("VIDEO");
    // 设置缩略图的缩放比例
    let slide = 0.5;
    // 有的同学可能会出现跨域现象，这里设置
    video.crossOrigin = "anonymous";
    // 设置video标签的src属性 src为视频的播放地址
    video.setAttribute("src", url);
    // 截取自定义帧数（这里可以不设置，如果不设置有可能会截取白屏，建议设置为1或者自定的帧数）
    video.currentTime = 13
    // 这里使用 promise 原因是：因为canvas绘图需要时间，程序需要时间执行，采用异步返回
    return new Promise((resolve, reject) => {
        // 这里是video的监听函数，不懂的同学去w3c 或者 菜鸟教程 查看 （监听video就绪之后就开始使用canvas绘图）
        video.addEventListener('loadeddata', function () {
            // 绘图就不用我多说了吧，创建画板
            let canvas = document.createElement("canvas");
            // 设置画板宽高 比例
            canvas.width = video.videoWidth * slide;
            canvas.height = video.videoHeight * slide;
            // 获取画板上下文执行绘图 直接把video 丢进去 就可以了
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

            // 这里可以自行扩展，我这里是直接返回base64的串
            // let img = document.createElement("img");
            // img.src = canvas.toDataURL("image/png");
            // console.log('url', canvas.toDataURL("image/png"))
            
            // 返回
            resolve(canvas.toDataURL("image/png"))
        });
    })
}

以上是视频截取的主要核心函数,其他的根据自己的业务逻辑进行，这个是我在项目中的简单使用，后续会继续扩展，目前功能比较单一，希望能给各位同学提供帮助！

其中涉及到 video的监听方法：

定义和用法 （菜鸟教程TP）

当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。

当音频/视频处于加载过程中时，会依次发生以下事件：

1. loadstart
2. durationchange
3. loadedmetadata
4. loadeddata
5. progress
6. canplay
7. canplaythrough

 

后续还会更新  觉得不错关注一波！一起交流