Home : Internet : HTML : Video

HTML5 Video

HTML5 supports the <video> element, allowing you to add a video player to your web page easily without the need for any plugins. The video element is supported by pretty much any browser that supports HTML5. The most basic version of the video element looks like this:

<video src="video.webm"></video>

The example above embeds a video file (in the webm format) but it doesn't do much else. You can also specify:

<video src="video.webm" poster="video.jpg" controls width="480" height="270"></video>

In a perfect world this would be all the code you need to get started, and hopefully one day it will be, but in the meantime there's a small problem...

The main disadvantage of HTML5 video is that there is currently no single video format that works in all browsers. This means that you'll need to encode at least two versions of each video to ensure that it can be seen in all browsers. The recommended formats are webm, ogv and h.264 (mp4).

To include multiple file options, use the <source> element, which allows you to specify more than one video file:

<video poster="video.jpg" controls>
    <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src='video.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
    <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'/>
    <p>This content is displayed by browsers that don't recognize the video element.</p>
</video>

Once you have created a simple video player, you can choose to move on to more advanced options such as creating custom controls, playlists, etc. This typically involves more HTML as well as JavaScript and CSS. We don't currently have any more tutorials available but if there's enough demand we can make it happen.

Subscribe to us on YouTube