3

我最近创建了一个帮助类来捕获video标签的屏幕截图。目前，该类包括一个使用画布的捕获方法。这一切都按预期工作；截取或捕获视频的当前帧 [ currentTime]。

var VideoSnapper = {
    captureAsCanvas: function (video, size)
    {
        // create a canvas, set the width and height, and draw the video
        var canvas = $('<canvas />').attr({ width: size.width, height: size.height })[0];
        canvas.getContext('2d').drawImage(video, 0, 0, size.width, size.height)

        return canvas;
    }
}

这是jsFiddle演示代码

我想进一步扩展它以允许time传入一个可选参数，该参数捕获视频中给定时间的屏幕截图。我试过更新视频上的时间，捕捉，然后改回时间，但没有成功。

非常感谢任何建议或想法。

4

3 回答 3

4

如果您将视频搜索到任何位置，则必须等待搜索事件。否则，视频不会加载。我刚刚做了这个例子，希望对你有帮助。http://jsfiddle.net/vphyr/另请查看此http://www.w3.org/wiki/HTML/Elements/video以了解有关 Video 元素的更多信息。

于 2012-07-07T00:33:04.707 回答
2

我正在使用 “ timeupdate ”事件video.currentTime = time 来寻找和拍摄快照。

于 2013-11-13T14:30:15.443 回答
0

这是我的代码：

function createPoster($video) {
        //here you can set anytime you want
        $video.currentTime = 5;
        var canvas = document.createElement("canvas");
        canvas.width = 350;
        canvas.height = 200;
        canvas.getContext("2d").drawImage($video, 0, 0, canvas.width, canvas.height);
        return canvas.toDataURL("image/jpeg");;
    }
    
   $video.setAttribute("poster", createPoster($video));

于 2020-09-15T13:25:59.877 回答