Question

我想根据按钮点击时视频的当前时间从视频中抓取图像。我目前正在使用视频标签播放视频，但没有看到任何用于从中抓取图片的资源。

<video
    id="video-player"
    class="video-player"
    width="640"
    controls="controls"
    muted=true>
    <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
    <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
    <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

Answer 1

好的，你就是这样做的

<video id="video" controls="controls">
....
</video>
<div id="capturedimage"></div>

<button>take picture from video</button>

和js

(function() {
    var $image = $("#capturedimage");
    var video = $("#video").get(0);

    var getImage = function() {
        var canvas = document.createElement("canvas");
        canvas.getContext('2d')
            .drawImage(video, 0, 0, canvas.width, canvas.height);

        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $image.prepend(img);
    };

    $("button").click(getImage);
})();

受http://odetocode.com/

影响很大

Answer 2

具有规模支持的纯JS方式：

/**
 * Takes a screenshot from video.
 * @param videoEl {Element} Video element
 * @param scale {Number} Screenshot scale (default = 1)
 * @returns {Element} Screenshot image element
 */
function getScreenshot(videoEl, scale) {
    scale = scale || 1;

    const canvas = document.createElement("canvas");
    canvas.width = videoEl.clientWidth * scale;
    canvas.height = videoEl.clientHeight * scale;
    canvas.getContext('2d').drawImage(videoEl, 0, 0, canvas.width, canvas.height);

    const image = new Image()
    image.src = canvas.toDataURL();
    return image;
}

从视频中获取图片

2 个答案: