Why You Need to Know HTML5 and CSS3 Pt.2

So today I’d like to show you how simple Html5 has made embedding video into your pages. In fact, I beleive we should drop the term embedding video as it is now a fully supported stardard. In any event, the inclusion of video in a web page now is very similar to that of the classic image tag <img src=”…”>.

For example, the most basic video tag looks like this:

<video src="SampleVideo.mp4"></video>

This will place the video on your page with no user controls, sized to the default dimensions of the video and will start playing upon page load. Now of course you will want to fit the video properly(even though you encoded at the proper resolution right?) and this is done exactly how img tags are done. Also we’ll want the user to have some kind of control over the video element to play, pause, stop, etc. We do this simply by mentioning controls to get the browser’s default implementation. If we wanted to design our own controls for the video element, then methods are exposed in javascipt to do this such as .play(), .pause() and .playbackRate which is a property to define the speed of playback( think fast forward or slow motion) in which 1.0 is normal speed. For now we’ll use the default controls.

<video src="SampleVideo.mp4" width="640" height="480" controls></video>

Two items that I beleive are essential to know is the preload and autoplay properties. These are extremely useful to prevent what I call the “Myspace effect”, in which upon page load 10 to 15 different video and audio players all fire off at once. Firstly preload is a property which tells the browser to start pulling this file off the server as soon as the page loads. This is fine if the content of the page is centered around the video element(such as youtube) but clearly not appropriate on a page with many video elements, such as vlog with many days of posts on one page which would kill the user’s bandwidth. With preload disabled the video element will only start pulling the file when needed. To enable preload simply mention it in the video tag and to disable set it to none.

<video src="SampleVideo.mp4" width="640" height="480" controls preload></video>


<video src="SampleVideo.mp4" width="640" height="480" controls preload="none"></video>

Secondly is autoplay which does exactly that. With the autoplay property the browser will pull the file and begin playing as soon as possible. Again, think youtube type scenarios. Html5 does not consider the Myspace effect and leave this up to the developers/designers. Hopefully the page and/or browser will have settings to ignore autoplay settings for users who do not like this functionality.

Lastly comes the issue of codecs, what video codecs are supports by Html5? Well officially this is not currently specified in the Html5 spec but all the popular browsers are going forward with the implementation of Ogg and H.264 containers. Microsoft recently has wavered on Ogg, the safe bet is on H.264 encoded files. However, the video element does allow for multiple source elements to be declared should this become and issue. The browser will then load video source elements in succession until one successfully plays. However, when doing this when trying different formats you’ll want to hint to the browser of the codec with the type property. This part of Html5 gets a bit ugly but I beleive a year from now we won’t even be concerned with this. A video codec will be agreed on, I’m betting on H.264, and we won’t have to think about it.

<video width="640" height="480" controls autoplay>
<source src="SampleVideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="SampleVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

So this is Html5 video in a nutshell. It is all very simple and everyone should not shy away from putting video and other dynamic content on their web pages going forward. This is a standard so expect it to work on all major browsers and mobile going forward.

Please do leave a comment if you have any questions or suggestions for future posts or message me on twitter @Keyboardg or email me at Greg@Databoost.org.


Leave a Reply