video.addEventListener('timeupdate', () => {
   // 绘制当前video
video.currentTime = 1;

为了方便大家的使用与学习，对于缩略图的提取，我直接弄了个方法，以1秒为间隔，批量返回视频的缩略图，大家可以直接使用，源码如下：

const handleGetVideoThumb = function (url, options = {}) {
    if (typeof url != 'string') {
        return;    
    // 默认参数
    const defaults = {
        onLoading: () => {},
        onLoaded: () => {},
        onFinish: (arr) => {}
    const params = Object.assign({}, defaults, options);
    // 基于视频元素绘制缩略图，而非解码视频
    const video = document.createElement('video');
    // 静音
    video.muted = true;
    // 绘制缩略图的canvas画布元素
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d', {
        willReadFrequently: true
    // 绘制缩略图的标志量
    let isTimeUpdated = false;
    // 几个视频事件
    // 1. 获取视频尺寸
    video.addEventListener('loadedmetadata', () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        // 开始执行绘制
        draw();
    // 2. 触发绘制监控
    video.addEventListener('timeupdate', () => {
        isTimeUpdated = true;
    // 获取视频数据
    params.onLoading();
    // 请求视频地址，如果是本地文件，直接执行
    if (/^blob:|base64,/i.test(url)) {
        video.src = url;    
    } else {
        fetch(url).then(res => res.blob()).then(blob => {
            params.onLoaded();
            // 赋予视频
            video.src = URL.createObjectURL(blob);
    // 绘制方法
    const draw = () => {
        const arrThumb = [];
        const duration = video.duration;
        let seekTime = 0.1;
        const loop = () => {
            if (isTimeUpdated) {                
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                canvas.toBlob(blob => {
                    arrThumb.push(URL.createObjectURL(blob));
                    seekTime += 1;
                    if (seekTime > duration) {
                        params.onFinish(arrThumb);
                        return;
                    step();
                }, 'image/jpeg');
                return;
            // 监控状态
            requestAnimationFrame(loop);
        // 逐步绘制，因为currentTime修改生效是异步的
        const step = () => {
            isTimeUpdated = false;
            video.currentTime = seekTime;
            loop();
        step();
handleGetVideoThumb(url, {
  onLoading: () => {},
  onLoaded: () => {},
  onFinish: (arr) => {}
其中，最主要的可选参数就是 onFinish 方法，其支持一个参数，为数组，里面就是1:1和原始视频尺寸一样的缩略图的 blob 地址，以秒为间隔。
更具体的使用可以参考demo页面的代码示意。
如果你希望获得某一具体时间的缩略图，可以参考本文提供的方法，稍加改造就可以。
例如将 seekTime 设置为你需要的时间，只绘制一次就执行params.onFinish方法。
三、有感而发
在之前，我一直以为<video>元素和<audio>元素一样，是个比较鸡肋的特性，不能应对复杂的需求。
最近发现，我的认识浅薄了，video还是可以的，不然不会只有Web Audio API而没有Web Video API。
琢磨了下，说不定试试绘制也是可以的，可能会有点延时偏差，应该好解决，再研究研究吧。
好吧，差不多就说这么多吧。
年底了，赶书稿，就不多啰嗦了。
感谢阅读，欢迎分享。
本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址：https://www.zhangxinxu.com/wordpress/?p=11103
（本篇完）
相关文章
JS audio加图片序列或canvas转webM/MP4的实现 (0.635)
使用JS提取视频中的音频资源 (0.196)
纯前端实现可传图可字幕台词定制的GIF表情生成器 (0.183)
又get到了，JS复制图片到剪切板 (0.183)
让所有浏览器支持HTML5 video视频标签 (0.127)
玩转HTML5 Video视频WebVTT字幕使用样式与制作 (0.127)
揭秘视频网站video视频倍速播放的实现 (0.127)
HTML5 video视频播放Picture-in-Picture画中画技术 (0.127)
HandBrake乃MP4免费压缩webm转换工具不二之选 (0.127)
从天猫某活动视频不必要的3次请求说起 (0.127)
翻译-你必须知道的28个HTML5特征、窍门和技术 (RANDOM - 0.056)