HTML5 Video Tutorial

This HTML5 Video Tutorial will cover the html5 video element, it's use and practical applications. HTML5 not only makes it much easier for you to embed your self-hosted videos, but also processes and displays them in a much smoother, faster-loading manner. Before HTML5 Video, to include a video your options were pretty much limited to embedding from youtube or embedding a flash element. Now you have the ability to simply use the "<video>" tag.

To give you an idea of the what the code looks like, here is an example of how you would include a video using html5:

<video width="320" height="240" controls>
<source src="YourMovie.mp4" type="video/mp4">
<source src="YourMovie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

This would include a video in both the mp4 and ogg format at 320px by 240px and will include video controls like play, pause, and volume controls. You can also control the volume of your video using jQuery if needed. In this case we only used mp4 and OGG file types, but the video element can also use the webM video format.

Each browser type has a different number of video types that they work best with, and unfortunately no one file type is accepted universally by all major browsers.  If you're able to include an MP4 and OGG video file though, your video should be viewable by just about any potential user.  To give you a better idea on what video types work where, you can consult the table below.

For a real world example on how we used this HTML5 video tutorial, you can view our work on the Haber website. We created a responsive layout that features a full page video upon landing, featuring their latest brand video. By self-hosting the video, Haber did not have to host their content on Youtube and they were able to serve their content quickly and with almost no loss of quality.

Using HTML5 to include video on your website is a great way to give your users and clients a much deeper and informative view into what it is you're presenting.