How To Embed media in HTML5 in easy way

For many, HTML5 first entered their vocabulary when Apple refused to add support for Flash in their iOS devices. Flash had gained market dominance (some would argue market stranglehold) as the plugin of choice to serve up video through a web browser. However, rather than using Adobe’s proprietary technology, Apple decided to rely on HTML5 instead to handle rich media rendering. While HTML5 was making good headway in this area anyway, Apple’s public support of HTML5 gave it a major leg up and helped its media tools gain greater traction in the wider community.

As you might imagine, Internet Explorer 8 and lower versions don’t support HTML5 video and audio. Most other modern browsers (Firefox 3.5+, Chrome 4+, Safari 4, Opera 10.5+, Internet Explorer 9+, iOS 3.2+, Opera Mobile 11+, Android 2.3+) handle it just fine.

Adding video and audio the HTML5 way

Video and audio in HTML5 is easy. The only real difficulty with HTML5 media used to be listing out alternate source formats for media (as different browsers supported different file formats). Nowadays, MP4 is ubiquitous across desktop and mobile platforms, making the inclusion of media in your web pages via HTML5 a breeze. Here’s a ‘simple as can be’ example of how to link to a video file in your page:

<video src="myVideo.mp4"></video>

HTML5 allows a single <video></video> tag (or <audio></audio> for audio) to do all the heavy lifting. It’s also possible to insert text between the opening and closing tag to inform users when there is a problem. There are also additional attributes you’d ordinarily want to add, such as the height and width. Let’s add these in:

<video src="myVideo.mp4" width="640" height="480">What, do you mean you don't understand HTML5?</video>

Now, if we add the preceding code snippet into our page and look at it in Safari, it will appear but there will be no controls for playback. To get the default playback controls we need to add the controls attribute. We could also add the autoplay attribute (not recommended—it’s common knowledge that everyone hates videos that auto-play). This is demonstrated in the following code snippet:

<video src="myVideo.mp4" width="640" height="480" controls autoplay> What, do you mean you don't understand HTML5?</video>

The result of the preceding code snippet is shown in the following screenshot:

Adding video and audio the HTML5 way

Further attributes include preload to control pre-loading of media (early HTML5 adopters should note that preload replaces autobuffer), loop to repeat the video, and poster to define a poster frame for the video. This is useful if there’s likely to be a delay in the video playing (or buffering is likely to take some time). To use an attribute, simply add it to the tag. Here’s an example including all these attributes:

<video src="myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.png">What, do you mean you don't understand HTML5?</video>

Fallback capability for older browsers

The <source> tag enables us to provide fallbacks, as needed. For example, alongside providing an MP4 version of the video, if we wanted to ensure a suitable fallback for Internet Explorer 8 and lower versions, we could add a Flash fallback. Further still, if the user didn’t have any suitable playback technology in the browser, we could provide download links to the files themselves. Here’s an example:

<video width="640" height="480" controls preload="auto" loop poster="myVideoPoster.png">
    <source src="video/myVideo.mp4" type="video/mp4">  
    <object width="640" height="480" type="application/x-shockwave-flash" data="myFlashVideo.SWF">
      <param name="movie" value="myFlashVideo.swf" />
      <param name="flashvars" value="controlbar=over&amp;image=myVideoPoster.jpg&amp;file=myVideo.mp4" />
      <img src="myVideoPoster.png" width="640" height="480" alt="__TITLE__"
           title="No video playback capabilities, please download the video below" />
    </object>
    <p><b>Download Video:</b>
  MP4 Format:  <a href="myVideo.mp4">"MP4"</a>
    </p>
</video>

That code example and the sample video file (me appearing in the UK soap Coronation Street, back when I had hair and hopes of staring alongside DeNiro) in MP4 format are in example2.html of the chapter code.

Audio and video tags work almost identically

The <audio> tag works on the same principles with the same attributes (excluding width, height, and poster). The main difference between the two being the fact that <audio> has no playback area for visible content.

About the author

Deven Rathore

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares