首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何从组件获取帧<video></video>

如何从组件获取帧<video></video>
EN

Stack Overflow用户
提问于 2019-03-23 22:24:48
回答 1查看 36关注 0票数 0

我想从javascript中的超文本标记语言<video></video>组件中获取帧,这样我就可以处理它们,然后输出到画布上

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-23 22:40:23

看看这段代码:Demo

代码语言:javascript
运行
复制
var videoId = 'video';
    var scaleFactor = 0.25;
    var snapshots = [];

    /**
     * Captures a image frame from the provided video element.
     *
     * @param {Video} video HTML5 video element from where the image frame will be captured.
     * @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
     *
     * @return {Canvas}
     */
    function capture(video, scaleFactor) {
        if (scaleFactor == null) {
            scaleFactor = 1;
        }
        var w = video.videoWidth * scaleFactor;
        var h = video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        return canvas;
    }

    /**
     * Invokes the <code>capture</code> function and attaches the canvas element to the DOM.
     */
    function shoot() {
        var video = document.getElementById(videoId);
        var output = document.getElementById('output');
        var canvas = capture(video, scaleFactor);
        canvas.onclick = function() {
            window.open(this.toDataURL(image/jpg));
        };
        snapshots.unshift(canvas);
        output.innerHTML = '';
        for (var i = 0; i < 4; i++) {
            output.appendChild(snapshots[i]);
        }
    }

(function() {
  var captureit = document.getElementById('cit');
  captureit.click();
})();

将视频url更改为:http://distribution.bbb3d.renderfarming.net/video/mp4/bbb,您就有了一个实时演示示例

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55314695

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档