[英]capture image from html5 video especific second js
我有这段代码来捕获html5视频,
问题是我想默认进行捕获...例如在第二个3中。
我该怎么做呢?
function capture(){ var canvas = document.getElementById('canvas'); var video = document.getElementById('video'); canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight); }
<video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" controls></video><br/> <button onclick="capture()">Capture</button> <br/><br/> <canvas id="canvas"></canvas> <br/><br/>
您可以使用video.currentTime = <sec>
截屏之前设置视频的当前时间。
该解决方案不是很好,它需要一些时间才能生效,我尝试了一个double requestAnimationFrame,它通常足以让浏览器完成其工作,但是并未在我的测试中
function capture(){ var canvas = document.getElementById('canvas'); var video = document.getElementById('video'); video.currentTime = 3; setTimeout(function(){ canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight) }, 500) }
<video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" controls></video><br/> <button onclick="capture()">Capture</button> <br/><br/> <canvas id="canvas"></canvas> <br/><br/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.