We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
 
2,673 Tutorials

How to add HTML 5 video to your website

Ensure compatibility in all browsers

The web has been through two distinct phases, usually referred to as Web 1.0 and 2.0. We’re now considering how the third phase will shape up. One technology that will be central is HTML 5, the latest generation of markup code that forms the backbone of every web page. The HTML 5 standard makes some radical changes to the way pages are structured, so that element tags refer to their roles in the page in a more fundamental and meaningful way.

An important part of this process is that audiovisual content has finally been brought into the fold.

For as long as the internet has existed, text has been rendered directly by every browser. Shortly afterwards, Mosaic popularised web graphics – again, rendered by the browser. But audio and video have always required plug-ins. This has made interaction between the streaming content and the other elements of the page problematic, and universal browser and platform compatibility impossible.

With HTML 5, however, both audio and video can be rendered directly by compatible browsers, in all platforms. Mobile web browsers will eventually be included, too.

This has enormous implications for video on your website. It simplifies the process, so you no longer need a proprietary streaming server and can host the files within your own web space. It also allows audiovisual elements to function in broadly the same way as text and images. Such content is more easily addressed by interactive scripting elements, letting your video drive other actions within the web page.

In this tutorial, we show you how easy it is to add HTML 5 video to your website. We’ll show you how to take advantage of HTML 5 and ensure your site continues to be accessible.

Add HTML 5 video to your website

Step 1. Your first task is to create your video files. You’ll need to create at least two versions to ensure your video is compatible with every browser. EasyHTML5Video will encode everything for you, and even creates the associated HTML files. It’s free for non-commercial use.

HTML 5 1

Step 2. For better configuration options we recommend MiniCoder. Install the software and run the updater to download the necessary encoder files. Load the files you want to encode into the list. You can encode multiple files simultaneously, but only one encoding template can be used at a time.

HTML 5 2

Step 3. First, we’re going to create an Mpeg4 file with MP3 audio. Choose x264 for the Codec, and MP4 for the Format. Set the audio codec to Lame MP3. Specify the video bitrate to 700kbps and the audio to 128kbps. You can also resize in the Filter Options. Save your settings as a preset for later use.

HTML 5 3

Step 4. Follow a similar process to create an Ogg Theora version. Selecting Theora greys out most of the Audio Options and Container option, but you can still choose bitrates for both video and audio, and resize settings. Again, we recommend saving your settings as a preset using the Save button at the bottom.

HTML 5 4

Step 5. Now you’re ready to create a raw HTML file. Whereas previous HTML standards required a long and confusing <!DOCTYPE> tag, HTML 5 merely needs <!DOCTYPE html>, plus a tag indicating the language used. Non-HTML 5 browsers will fall back to a default state, which should be fine for the compatibility elements we’ll add later.

HTML 5 5

Step 6. Place your HTML index file and videos in a well organised folder structure, such as the index in the root and videos in a subfolder called ‘video’. You can now add a basic <video> tag. We’ve also added the ‘src’ (source) parameter to tell the browser where to find the video and closed the section with a </video> tag.

HTML 5 6

Step 7. In an Mpeg4-compatible browser, you’ll see something like this. The first frame of the video will be loaded, but nothing else. The video won’t autoplay and you can’t click on it to play. So the next stage is to add some more parameters to our <video> tag to provide controls and add other features.

HTML 5 7

Step 8. We’ve now added the parameters ‘autoplay’ and ‘controls’. The first will set the video playing as soon as enough has been loaded over the web connection for the browser to be confident of getting to the end without rebuffering. The ‘controls’ tag adds the default playback controls for your browser.

HTML 5 8

Step 9. The video now looks like this in Chrome, but in a non-Mpeg4-compatible browser such as Firefox you won’t see the video at all. You’ll see only a non-functioning player with an incorrect video frame size. The browser won’t have been able to parse this from the video file header, since it can’t read the file. Fortunately, there is a fix.

HTML 5 9

Step 10. We’ve taken out the ‘src’ parameter from the <video> tag and added it to an extra <source> tag. We’ve also added a second <source> pointing to the Ogg Theora file. Finally, we’ve added ‘type’ parameters – ‘video/mp4’ for Mpeg4 and ‘video/ogg’ for Ogg Theora. These <source> tags must come between <video> and </video>.

HTML 5 10

Step 11. The video will now play in any HTML 5-compatible browser. After loading the HTML file, a browser will go through the list of possible video files until it finds one it can play. Put the Mpeg4 <source> first because some versions of iOS require this. Next, we need to add instructions for legacy non-HTML 5 browsers.

HTML 5 11

Step 12. You can add text telling visitors to upgrade their browser, or you can provide a fallback option for legacy browsers that support Flash. Use JW Player (tinyurl.com/5an8yw) to create a Flash-based player for your video. Place the <object> code you create within your <video> and </video> tags, after the <source> tags.

HTML 5 12

Step 13. Another useful <video> parameter is ‘poster’. This allows you to define an image to use as the initial thumbnail (else the first frame will be displayed). Grab a frame of your choice, save it as a Jpeg or PNG, then add the parameter to your <video> tag as shown. This picture will be used for every browser which supports it.

HTML 5 13

 

Step 14. Here is the video, showing a still frame prior to playback, in Firefox, Chrome and Internet Explorer. Note that the latter doesn’t display the poster frame, evidence of the fact that there’s still some way to go before HTML 5 video can be used with total confidence that it will work as hoped in every browser.

HTML 5 14 aHTML 5 14 bHTML 5 14 c

IDG UK Sites

Samsung Galaxy Note 4 release date, price and specs 2014

IDG UK Sites

iOS 8 features wishlist: the changes iPhone and iPad users want in Apple's iOS 8

IDG UK Sites

25 Years of the World Wide Web: Happy Birthday, Intenet

IDG UK Sites

Developers get access to more Sony camera features