使用 Canvas 从 Video.js 中捕获帧答案

【问题标题】：Capture Frame from Video.js with Canvas使用 Canvas 从 Video.js 中捕获帧
【发布时间】：2018-09-14 03:30:53
【问题描述】：

我正在尝试通过使用画布捕获当前帧、创建图像、在图像下进行所有播放器更改等来淡出 Video.js 视频，然后淡出图像。

我似乎无法通过 Canvas 访问视频，我明白了

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

这是代码

    var video = document.getElementById('video');
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, video.width, video.height);
     var dataURL = thecanvas.toDataURL();

        //create img
        var img = document.createElement('img');
        img.setAttribute('src', dataURL);

        //append img in container div
        document.getElementById('body').appendChild(img);

视频是这样创建的：

             <video id='video' class='video-js' preload controls>
             <source src='http://example.com/video.mp4"' type='video/x-m4v' />
             </video>

视频运行良好等。

处理我使用的视频

    var player = videojs('video');  
    player.dispose();

并假设这将是一个更好的选择器，但是在声明后将“播放器”放入 context.drawImage 也无济于事。

【问题讨论】：

标签： javascript html video canvas video.js

【解决方案1】：

我能够通过使用 children 数组来让它工作。

context.drawImage(video.children_[0], 0, 0, canvas.width, canvas.height);

另外，不要依赖video.width 和video.height。他们似乎没有更新。请改用video.currentDimension("width") 和video.currentDimension("height")。

【讨论】：

【解决方案2】：

似乎不可能使用 Video.js 我已切换到 Popcorn 并使用 https://github.com/rwaldron/popcorn.capture 获取帧。这是有效的。

【讨论】：