CODEWITHSUNDEEP
javascript
joe
joe

Reputation: 3

capture image from html5 video especific second js

I have this code to take a capture of a html5 video,

The problem is that I want to take a capture by default...for example in the second 3.

How Do I do this?

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/>

Upvotes: 0

Views: 423

Answers (1)

Benjaco
Benjaco

Reputation: 303

You can set the current time of the video before taking the screenshot with video.currentTime = <sec>

The solution isn't that great, it needs some time before taking effect, I tried a double requestAnimationFrame which usually is enough to let the browser do its work, but wasn't in my testing

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/>

Upvotes: 1

Related Questions