Button start/stop frame capture of the video stream

[vTermin]

The video viewer does not always want to see frame capture during playback. How to make one button for start and stop capture of video frames?

example Armando Roggio: http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/12/html5-video-article-demos/thumbnails-demo.html

I tried this:

<canvas id="canvas" width="750px" height="540px" style="display: none;"></canvas>
<div id="screenShots"></div>
      
<button type="button" id="button">Start</button>

window.onload = function () {
   var b = document.getElementById("button");
       b.onclick = function() {
        if ( this.innerHTML == "Start" )        
             this.innerHTML = "Stop",
             this.setAttribute("aria-pressed", "false"), clearInterval(drawTimer); 
        else this.innerHTML = "Start", 
             this.setAttribute("aria-pressed", "true"), drawTimer = setInterval(drawTimer);                
        return false;
    }    
}

but this method is not working.

[vTermin]

Topic closed due to no response!

[Mittineague]

Hi vTermin welcome to the forum

I haven’t worked through the article
http://www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/

And the topic mentions browser support, but nothing about modifying that I can see

HTML5 Video: Fragments, Captions, and Dynamic Thumbnails

Originally published at: http://www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/ Web and application developers who want to do more with online video may find that three little-known, or at least less often discussed, HTML5 video features may open many new and creative techniques to integrate video in new ways. In this article I’ll describe: media fragments, the track element, and HTML5 video’s ability to integrate easily with other elements. Media Fragments Media fragment…

So am I correct in thinking you followed the steps and got that to work, but are having trouble modifying it?

Perhaps @aeroggio will pop in

[vTermin]

Why would you write. The question was different.

To do so:

<button type="button" id="button">Start</button>

window.onload = function () {
    video.addEventListener("playing", stopScreenshot);
    var b = document.getElementById("button");
        b.setAttribute("aria-pressed", "false");
        b.onclick = function() {
    if ( this.innerHTML == "Start" )     
         this.innerHTML = "Stop",
         this.setAttribute("aria-pressed", "true"), startScreenshot();  
    else this.innerHTML = "Stop",
         this.setAttribute("aria-pressed", "false"), stopScreenshot();
    }                             
    return false;
}

[coothead]

Hi there vTermin,

you can see a possible solution here…

http://www.coothead.co.uk/vTermin/index.html

Check out the attachment which contains all the relevant files.

vTermin.zip (1.0 MB)

Note, though, that you will need to upload it to your server to
see it work - ( just noticed that it does work locally on Firefox ).

coothead