jquery - 在 HTML5 视频中捕获特定时间的图像

标签 jquery html video

我最近创建了一个辅助类来捕获 video 标签的屏幕截图。目前,该类包含一个单一的捕获方法,它使用 Canvas 。这一切都按预期工作;对视频的当前帧 [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 参数,该参数捕获视频中给定时间的屏幕截图。我试过更新视频上的时间,捕获,然后将时间改回来,但没有成功。

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

最佳答案

如果你向任何位置寻找视频,那么你必须等待被寻找的事件。否则,视频不会加载。我刚刚做了这个例子,所以我希望它能帮助你。 http://jsfiddle.net/vphyr/另请查看此 http://www.w3.org/wiki/HTML/Elements/video有关视频元素的更多信息。

关于jquery - 在 HTML5 视频中捕获特定时间的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11331873/

相关文章:

javascript - 无法读取未定义的属性 'toLowerCase' - jQuery

javascript - 使用 jQuery 设置背景图像仅更改背景一次

jquery - HTML设计-用div替换表格

video - 有什么简单的方法可以提取 annexb 格式的 h.264 原始流吗?

javascript - 从我的站点提交表单方法 POST 到另一个站点并获取远程结果

javascript - 循环中暂停并重新启动setTimeout

html - CSS:对齐和换行文本

javascript - 提交时从 git pull 到网站

css - 如何在 HTML5 视频上创建叠加层?

python - 使用 Flask 提供 .mp4 文件并在 Objective-C 应用程序上播放会导致管道损坏且无法播放