Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 342

Listing 9-35. A YouTube Video Cannot Be Played Using the video Tag (Demonstration Only)
<video src=" http://www.youtube.com/watch?v=WgL7DMiTCAY "></video>

(X)HTML5 videos can be dynamically drawn on a canvas with JavaScript using the drawImage method, such as in
Listing 9-36.

Listing 9-36. Video Drawn on the Canvas Using JavaScript

<video src="video.mp4" controls="controls">
Video not supported
</video>
<canvas id="canvas">
Canvas not supported
</canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var video = document.getElementsByTagName('video')[0];
video.onloadeddata = function(e) {
ctx.canvas.width = video.videoWidth;
ctx.canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
}
</script>

Summary
In this chapter, you learned how to provide an advanced user experience through optimized appearance using
standards. You became familiar with many web site components that contribute to user experience and affect web site
usability and functionality. You know that it is a real challenge to ensure proper appearance across devices, which can
be achieved by creating browser- and resolution-independent web sites with robust layout. You are well aware that
many of the once popular techniques are obsolete, and tables should be used for tabular data only, not for layout. CSS
provides full control over the appearance of web site components, and responsive layouts should be used in place of
fixed-width documents. You also know how to optimize images for your web sites and embed Flash and video files in
a browser-independent, standard-compliant manner.
In the next chapter, you will learn accessibility techniques that maximize user access to your web sites.
By following the accessibility guidelines, you will be capable of supporting not only people with disabilities and
mobile users but also all the others, because everyone benefits from an advanced level of web accessibility.

References

1. Hazaël-Massieux D (2005) Tableless layout HOWTO. World Wide Web Consortium.

http://www.w3.org/2002/03/csslayout-howto . Accessed 15 October 2014

2. Cederholm D (2009) CSS layouts. In: Web standards solutions, Special edn.

Friends of ED, Berkeley

3. W3C (2003) Errata in REC-CSS2-19980512. World Wide Web Consortium.

http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html .
Accessed 15 October 2014