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.
Add HTML 5 video to your website
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.
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.
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.
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.
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.
Comments