学习如何绘制视频帧到一个canvas元素，并促进各种效果html5video
1. video the starsites such as sailing-with-greenpeace.com make web video the central focal point to the experience. html5, and the ability to embed and play video natively inside the browser, makes this kind of design far more robust. the greenpeace project utilises the <video> tag for intro background and archive clips, all stretched full width to provide an immersive experience.
2. the <video> taghtml5 video begins with the tag itself, defining attributes for how the player element appears or behaves. a set of <source> tags wrapped inside then point to each file path and the encoding types: webm, mp4 and ogg formats. in this example we will start from a video tag like so:
<video id=thevideo autoplay loop> ?
<source src=myvideo.webm type=video/webm>
<source src=myvideo.mp4 type=video/mp4>
<source src=myvideo.ogg type=video/ogg>
</video>3. canvas and overlay wrapperour video tag from the last step is called ‘thevideo’, is set to be looped and will autoplay – this is useful for full-width/height backgrounds. this is also how we’ll use it here, although rather than maximise the video we’ll draw the video to a full-screen <canvas> element instead, placed above our video within a wrapper
<div> element:
<div id=overlay class=fullsize>
<canvas id=thecanvas class=fullsize></canvas>
<video id=thevideo autoplay loop>
<source src=myvideo.webm type=video/webm>
<source src=myvideo.mp4 type=video/mp4>
<source src=myvideo.ogg type=video/ogg>
</video>
</div>4. force elements to be .fullsizemoving to our css, we start our styling with the .fullsize class linked to the canvas and wrapper elements. both of these will occupy 100 per cent of the browser by setting dimensions to maximum percentage, while positioned absolute and all four edges forced to zero.
.fullsize {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}5. add the patterned overlayin this instance, our canvas video background will be deliberately styled to appear pixelated by using a repeating transparent png grid pattern overlay. this is achieved via the full-screen overlay wrapper <div> and by setting its background to the simple pattern graphic. here you can see the class with the background set to the image file itself or the base64 encode:
#overlay {
background: url(grid.png) fixed repeat;
background: ?url('data:image/png;base64,ivborw0kggoaaaansuheugaaaakaaaajcayaaadgkqyqaaaagkleqvqygwnkgid/ubonrvabe06tsbldwxeacwccdlgmz/kaaaaasuvork5cyii=') fixed repeat;
}6. additional element stylesnow add a couple of classes for cosmetic tweaks. lower the opacity of our canvas very slightly to make the overlay more prominent. secondly, we can either position our video box on the page to compare playback or hide it by setting display to none, shown commented here:
#thecanvas {
opacity: 0.8;
}
#thevideo {
position: absolute;
width: 480px;
height: auto;
right: 3%;
bottom: 5%;
/*display: none;*/
}7. initialise the objectsonce the window and video is loaded, a js <script> begins by grabbing the canvas, its 2d drawing context and the video from the document. from here we can call a function we’ll recursively call ‘drawvideo()’, passing in all those iniltialised objects and the drawing surface width/height of the canvas:
<script>
window.onload=function(){
var canvas = document.getelementbyid(thecanvas);
var context = canvas.getcontext(2d);
// grab canvas and 2d drawing context
var video = document.getelementbyid(thevideo);
// grab the video element
drawvideo(context, video, canvas.width, canvas.height);
// calls drawvideo() function, passing all the objects
}8. recursive drawing functionthe drawvideo() function crucially calls drawimage() on the canvas context, passing the current video frame. here you can set a millisecond delay after the first pass to add a