HTML5 Video Capture Snapshots / Images

I was recently developing a fully resposive and customised HTML5 player and I wanted to be able to switch between bitrate sources smoothly. Instead of using two seperate videos, I thought it might be easier to capture a snapshot at the video’s currentTime, display it while the video shows a  glitch during switching of the source and remove this snapshot once switched. In order to do so, I needed to create a simple jquery method to do so using canvas. I thought it was pretty cool so I decided to upload a mini version to display the capturing of the images under the video while playing. For a live demo click here.



#player-container { position: relative; width: 620px; }
#player-container .camera {

width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; z-index: 99999999;
background-color: rgba(0,0,0,0.7); border-radius: 4px;
background-image: url(‘camera.png’);


#gallery-snapshots { width: 100%; height: 87px; background-color: rgba(0,0,0,0.7); margin-top:10px; width: 620px; }
#gallery-snapshots:empty { background-color: transparent; }
#gallery-snapshots canvas{ float: left; margin: 10px; }

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }



<script src=””></script&gt;


function takeSnapshot() {

var video = $(“#player-container”).find(“video”);
var wrapper = $(“#gallery-snapshots”);

var canvases = $(‘canvas’);

//Remove if it has no limit of how many snapshots
if (canvases.length == 4)

var spacing = 20;
var height = (video.height() / 4) – spacing;
var width = (video.width() / 4) – spacing;

var canvas = $(‘<canvas />’).attr({ width: width, height: height })[0];
canvas.getContext(‘2d’).drawImage(video[0], 0, 0, width, height);



And finally, the HTML:

 <div id=”player-container”>

<div id=”captureSnapshot” class=”camera” onclick=”takeSnapshot()”></div>

<video width=”620″ autoplay autobuffer controls preload=”auto”>

<source src=”movie.mp4″ type=”video/mp4″>
<p>Your browser does not support HTML5 video.</p>



<div id=”gallery-snapshots” class=”clearfix”></div>

Have fun !!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s