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.
Instructions:
CSS:
#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; }
Jquery:
<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script>
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)
canvases.eq(0).remove();
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);
wrapper.append(canvas);
}
</script>
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>
</video>
</div>
<div id=”gallery-snapshots” class=”clearfix”></div>
Have fun !!