Question

我有这段代码可以捕获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/>

Answer 1

您可以设置视频的当前时间，然后使用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/>

从html5视频especific第二个js捕获图像

1 个答案: