All Articles Web
How to Add Stunning HTML5 Video to Your Site
Tareq Fadel on Thu, February 28th 3 comments
If you're looking to adding video to your site and getting your video to play on all devices including Android and Apple iPhone and iPad then you need to start thinking of using HTML5 video.

If you're looking to adding video to your site and getting your video to play on all devices including Android and Apple iPhone and iPad, then you need to start thinking of using HTML5 video. For years we've been using Flash video, but unfortunately Flash isn't supported by Apple iOS devices and the Adobe Flash Player for Android has been revoked. This guide will show you how to convert your videos into HTML5 and include them into your site.


The first step we need is the original source video, then we'll convert it to the appropriate HTML5 video formats. It would've been great if we could convert it to one format and be done with that but there are 3 HTML5 formats that we'd need to convert the video to. The 3 formats are WebM, Ogg Theora and H264. The reason for this is that some browsers don't support all formats and to cater for cross browser and device compatibility we'd need to convert to all three.


Step 1 - Convert

We'd need to use a video converter. There are a few out there on the market some are free, others are paid for. The one I recommend is Miro Video Converter as it supports all the formats required for HTML5 video.

Miro Video Converter


Drag the video into the application, next on the button labelled Format choose Video WebM HD or SD depending on the original quality of the video. For the video I’m choosing, I’m sticking with SD (Standard Definition) then Click Convert. Choose the other 2 formats, MP4 and Ogg Theora.

Choose the other 2 formats, MP4 and Ogg Theora


Once you’ve completed the videos you’ll have 3 additional files in the output folder.

3 additional files in the output folder


Step 2 - Adding Videos to site

There's a new HTML tag called <video> that will allow us to embed the videos to the site. Inside your HTML tag add the following code:

<video src="video.mp4">

By doing so, this will allow the video to be added to the site. Load the page in a browser and you'll see that the video has loaded but does not play.  

Video has loaded but doesn't play


There are couple of attributes that we may want to add. One is controls and the other is autoplay so the line of code would look like so:

<video src="video.mp4" controls autoplay>

Autoplay


Unfortunately this video would only play in a couple of browsers and to make it cross browser compatible we would need to support the other video formats.


Step 3 - Cross browser compatibility

To do this, we would need to include the <source> tag. Below is an example showing how to include all 3 formats for cross-browser compatibility.

<video controls autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>

<source> tag


Don't forget to add the type attribute to let the browser know what format each file is. Also make sure that the first option is always the MP4 file as early iOS devices would not play the video if the file was not the first in the list.

By doing the above, you would've added HTML5 video to your site and made the site work with all modern browsers. Bear in mind that there are still a lot of users on old internet explorer versions 6, 7 and 8 that are not HTML5 compatible and you'd need to deliver the video in the older Flash format for them to be able to view it.

Related Videos
Comments (3)

You must be logged in to comment.

  • Peter Schwartz
    Regarding what you wrote regarding some older browsers not being HTML5 compatible, is there a Javascript routine (or other code) you could offer that will auto-detect the browser type and select between the new HTML5 video code and Flash player code?
    • 7 years ago
    • By: Peter Schwartz
    Reply
  • Tareq Fadel
    I try to steer clear from JavaScript when providing video compatibility for various different browsers. The best solution is to offer a flash playback support as a fallback within the video tag. An example of this can be found on http://camendesign.co.uk/code/video_for_everybody
    • 7 years ago
    • By: Tareq Fadel
  • Peter Schwartz
    Thank you for your reply Tareq. Much appreciated!
    • 7 years ago
    • By: Peter Schwartz
    Reply
Quicklook Guide
HTML & CSS 100
Dream It. Do It.
Do you want to learn Quicklook Guide?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: