利用HTML5 从视频中捕获静止图像实例代码
发布时间:2020-07-22 编辑:jiaochengji.com
教程集为您提供利用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 从视频中捕获静止图像实例代码的详细内容,更多请关注教程集其它相关文章!-->
您可能感兴趣的文章:
利用HTML5 从视频中捕获静止图像实例代码
html5播放视频的标签是什么?如何在web页面播放视频呢?(内附实例)
HTML5音频与视频问题及解决方法
HTML5中video标签如何使用
html5的video(视频)和audio(音频)标签中的属性用法
html5是什么?html5有什么用?
关于html5中标签video播放的新解析
js和HTML5基于过滤器从摄像头中捕获视频的方法
HTML5嵌入音频和视频的方法
html5调用app分享功能的介绍
上一篇:关于h5本地数据库的基本介绍(适合初学者)
下一篇:畅谈HTML5 到底是什么?
[关闭]