One of my favorite parts of the new HTML5 spec is the browser based support for video and audio. Up till now, adding video (or audio) to your web page involved an annoying process involving Adobe Flash and inserting some of the ugliest code known to man into your webpage. The <video> and <audio> tags will change all of that!
The <audio> and <video> tags operate the exact same way, and I don’t want to accidentally encourage anybody to place background music (or the sounds of farm animals) on there website! So from here on out we’ll talk solely about the <video> tag!
From a code standpoint, embedding video couldn’t be easier. Open a <video> tag, place the actual video source inside, and the browser does the rest!
All modern browsers support HTML5 video, but (there’s always a but) they support difference video formats. The latest versions of Mozilla Firefox, Google Chrome, and Opera support Google’s WebM open video format. Both Microsoft Internet Explorer and Apple Safari don’t support WebM and instead use H.264 for video playback.
The creators of the HTML5 spec were thinking ahead though, inside that <video> tag you can list fallbacks for different browsers! So we can list a WebM source, a H.264 source, and can even insert an old Flash player as the final fallback for all the kiddies using older versions of Internet Explorer.
Where the <video> tag gets fun is interaction and styling we are able to do with it. Because it’s a HTML element, we can add styling via CSS, create our own buttons and interactions via JavaScript, and even use other HTML5 drawing elements such as SVG and canvas.
The new <video> and <audio> tags help rid our dependence on the Adobe Flash plugin, AND will save time, which will in turn save you money! Thank you HTML5!