HTML and CSS Reference
In-Depth Information
Discussion
Here's the complete markup and script for this example:
<video id="origVideo" width="640" height="360">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
Your device does not support HTML5 video.
</video>
<button title="Generate Preview" onclick="generatePreview();">Generate
Preview</button>
<canvas id="previewMed"></canvas>
<canvas id="previewSm"></canvas>
<script>
function generatePreview(){
var video = document.getElementById('origVideo');
var canvas1 = document.getElementById('previewMed');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('previewsSm');
var context2 = canvas2.getContext('2d');
canvas1.width = 320;
canvas1.height = 180;
canvas2.width = 160;
canvas2.height = 90;
video.addEventListener('play', function(){
drawVideo(this,context1,context2);
},false);
video.play();
}
function drawVideo(video,canvas1,canvas2) {
if(video.paused || video.ended) return false;
canvas1.drawImage(video,0,0,320,180);
canvas2.drawImage(video,0,0,160,90);
setTimeout(drawVideos,25,video,canvas1,canvas2);
}
</script>
With native video offered through HTML5, web developers now have the ability to
dive deep into a video file and make enhancements to the user experience that were
once the domain of proprietary technologies.
See Also
HTML5 Doctor offers demos and detailed descriptions of other ways to use canvas and
video together at http://html5doctor.com/video-canvas-magic/ .
 
Search WWH ::




Custom Search