使用Canvas从Video.js捕获帧

Capture Frame from Video.js with Canvas

本文关键字：js Video Canvas 使用      更新时间：2023-09-26

我正试图通过用画布捕捉当前帧、创建图像、在图像下进行所有播放器更改等来淡出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也无济于事。

我能够通过使用子数组使其工作。

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

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

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

相关文章：