Introducing HTML5 - Feature 1 - Video

The advent of HTML5 and its subsequent progression into the mainstream, and its official recognition as ‘W3C Recommended’ by the World Wide Web Consortium (W3C) in the tail-end of last year has revolutionised frontend website development.

New Mark-up

Not so long ago, to have media playing on a webpage would involve a dozen lines of code, ugly <embed> tags, and often third party software. However, with the launch of the HTML5 specification in modern browsers this is now very much a thing of the past. The once tricky task of embedding a video onto a page is now simpler, without all the previous hassle of ensuring that you had the relative plugins and video codecs.

Once upon a time… if I wanted to embed a YouTube video onto a webpage, I would need to write mark-up that looked a little like this:

<object width="560" height="315">
<param name="movie" value="//www.youtube.com/v/AEV15jf7voA?hl=en_GB&amp;version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="//www.youtube.com/v/AEV15jf7voA?hl=en_GB&amp;version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

However in order to support modern browsers all that is required is this:

<video poster="/path/myvideo.jpg" controls>
<source src="/path/myvideo.m4v" type="video/mp4" />
</video>

Whilst streamlined mark-up is one advantage of the HTML5 Video specification, there are numerous others, such as the fact that it allows us to stream videos from local sources and other websites without having to rely on third party services such as YouTube. In the streamlined mark-up above you will also notice that the new specification allows us access to new built-in functionalities such as:

  • Autoplay
  • Poster
  • Autobuffer
  • Controls
  • Loop

Generic red Graphics cardHardware Acceleration

Aesthetics and prettiness of mark-up aside, the other great feature of HTML5 is that the playback of video has the ability to be hardware accelerated. This essentially means that the legwork required when rendering a video is handed over the GPU or graphics card rather than being handled by your computers CPU. Whilst on modern desktop computers this isn’t really an issue, on mobile devices the result is a much more responsive, faster, playback as it hands a calculation heavy task to a completely separate part of the computer allowing your computer to carry out its usual tasks without having to experience a slowdown whilst a video is played.

Legacy Fallback

Despite all these cool new features, there will be many users out there that will never get to experience them due older, unsupported, web browsers. However HTML5 specification has taken this into account and allows to us place legacy code within the new mark-up so in the event that a browser doesn’t understand HTML5 it will just display that legacy code, as you can see in this example:

<video poster="/path/myvideo.jpg" controls>
<source src="/path/myvideo.m4v" type="video/mp4" />
<embed src="//www.youtube.com/v/AEV15jf7voA?version=3&amp;hl=en_GB" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>

With this in place, the older web browser (that doesn’t support HTML5) will just skip the <embed> tag and render the way it is used to.

This functionality is great for developers… it allows delivery of great new features to users without having to sacrifice functionality.


Duncan is a Developer, who has experience building websites and web applications in multiple coding languages.

back To blog