Jquery中文网 www.jquerycn.cn
Jquery中文网 >  前端编程  >  HTML5教程  >  正文 利用HTML5 从视频中捕获静止图像实例代码

利用HTML5 从视频中捕获静止图像实例代码

发布时间:2020-07-22   编辑:www.jquerycn.cn
jquery中文网为您提供利用HTML5 从视频中捕获静止图像实例代码等资源,欢迎您收藏本站,我们将为您提供最新的利用HTML5 从视频中捕获静止图像实例代码资源
一个简单的例子展示了如何从视频中捕获静止图像。下面来看一下

假设你有下面的HTML代码:

<video id="video" controls="controls">
    <source src=".mp4" />
</video>
 
<button id="capture">Capture</button>
 
<p id="output"></p>

然后,当用户单击“捕获”按钮,我们将当前的视频内容写入到一个画布,并使用在画布上显示图像。

(function() {
    "using strict";
 
    var $video, $output;
    var scale = 0.25;
 
    var initialize = function() {
        $output = $("#output");
        $video = $("#video").get(0);
        $("#capture").click(captureImage);               
    };
 
    var captureImage = function() {
        var canvas = document.createElement("canvas");
        canvas.width = $video.videoWidth * scale;
        canvas.height = $video.videoHeight * scale;
        canvas.getContext('2d')
              .drawImage($video, 0, 0, canvas.width, canvas.height);
 
        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $output.prepend(img);
    };
    $(initialize);           
}());
以上就是利用HTML5 从视频中捕获静止图像实例代码的详细内容,更多请关注jquery中文网其它相关文章!

-->
  • 本文原创发布jQuery中文网,转载请注明出处,感谢您的尊重!
  • 您可能感兴趣的文章:
    利用HTML5 从视频中捕获静止图像实例代码
    HTML5音频与视频问题及解决方法
    html5播放视频的标签是什么?如何在web页面播放视频呢?(内附实例)
    HTML5中video标签如何使用
    html5的video(视频)和audio(音频)标签中的属性用法
    关于html5中标签video播放的新解析
    js和HTML5基于过滤器从摄像头中捕获视频的方法
    html5是什么?html5有什么用?
    HTML5嵌入音频和视频的方法
    H5的audio音频和video视频使用详解

    [关闭]