Ad Code

Using HTML 5 Rich Media Tags

Altaf Hussain Patel Saturday, July 31, 2021
HTML 5 Rich Media Tags

Today, people will watch more than 2 billion movies on the Internet. That’s right, two billion. Video is a big deal. Fortunately, HTML5 will make it easier for you to add video when you use a new HTML element called VIDEO.

The new video element is similar to the IMG element for images—it sits within the HTML BODY tag inserted in a webpage. To include video, you just add the following:

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

The above example links to an MPEG4-encoded video. That’s it. No fussing with plugin OBJECT tags and parameters. Just one line using a simple, powerful HTML5 element.

This new VIDEO element has instigated a war of words about which video format the VIDEO element should play. There are three formats jostling for votes (MPEG4, Ogg and WebM). The good news is, the top 5 web browsers now support VIDEO, including Internet Explorer 9.

In this article, I’ll introduce you to:
  1. The HTML5 VIDEO element
  2. The attributes used to control content within the element
  3. How to encode HTML5 Video
  4. Whether or not you should be using HTML5 Video in your website

Controlling video with VIDEO tags

As we’ve seen, adding a VIDEO element requires only one line in your HTML. The following example adds opening and closing tags for the VIDEO element. The first tag includes an SRC attribute that points to a supported HTML5 video file (in this example we’re pointing to a MPEG4 video):


<video src=”myMovie.mp4” ></video>

That’s it. If you want to get more sophisticated you can use the following attributes for the VIDEO element:

  • Autoplay – the video will play immediately if already downloaded in your cache
  • Controls – a simple playback head will be added with VCR-like play and pause controls
  • Height and Width
  • Loop – you can loop the video

To get the most out of your video playback you’ll want to use some of the attributes listed above. For instance, if you want your video to start playing when the Web page has finished loading, you should use the AUTOPLAY attribute as follows:


<video src="myMovie.mp4" autoplay></video>

The video won’t automatically play if you don’t include it.

NOTE: the autoplay attribute doesn’t work with Mobile Safari on the iPhone and iPad.

A second useful attribute to add is the “controls” attribute.

<video src="myMovie.mp4" autoplay controls?</video>

Try viewing the controls attribute in IE9, Chrome, FireFox, Opera or Safari—you’ll notice it looks different in each browser. Each browser uses a different playback video engine, and each engine has its own default control style. This can make it difficult to present a video playback experience that’s consistent from one browser to another.

Luckily, there’s a way to override this issue using JavaScript and CSS.

Controlling the VIDEO element with JavaScript

You can control the VIDEO element with JavaScript. This means you can control media using your own custom controls. The following example will show you how to add a custom Play/Pause button to your video.


Start out with a blank HTML5 page: 


<!DOCTYPE HTML>
<html>
<head>
<title>Video in HTML5</title>
</head>
<body>
</body>
</html>

In the BODY section, add the VIDEO element and link to a video file: 



<video autoplay >
  <source src="myMovie.mp4">
</video>

You can see here that the video file doesn’t have any attributes that control playback. You can add those controls programmatically with JavaScript. Let’s start by adding the controls that play the movie:


Play/Pause

After the VIDEO element, add the following JavaScript:



<script>
   var video = document.getElementsByTagName('video')[0];
</script>

This script gives the VIDEO element a name you can reference. The final step is to add a script to the ANCHOR tag:



<a href="#" onclick="if (video.paused) video.play(); else video.pause()">Play/Pause</a>

The ANCHOR element uses an onclick event to trigger an IF/ELSE JavaScript command. If the button is pressed and the video hasn’t been played, then the video will start to play. Else, if the video is playing and the button is selected it will pause the video. Altogether your code will look like this:




<!DOCTYPE HTML>
<html>
<head>
<title>Video in HTML5</title>?
</head>
<body>
<video autoplay >
 <source src="myMovie.mp4">
</video>
 <script>
  var video = document.getElementsByTagName('video')[0];
  </script>


<a href="#" onclick="if (video.paused) video.play(); else video.pause()">Play/Pause</a>
</p>
</body>
</html>

An additional benefit of using JavaScript to control the presentation of your controls is that you can use CSS to style them. Here is a basic style applied to our video controls:



<!DOCTYPE HTML>
<html>
<head>
<title>Video in HTML5</title>
<style type="text/css">





a {
     font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
     font-size: large;
     text-decoration: none;
     color: #C0C0C0;
}





h1 {
     font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
     font-size: 24pt;
     color: #C0C0C0;
}





body {
     background-color: #000000;
}







<h1 align="center">Video with Custom JavaScript Controls</h1><p align="center">





<video autoplay >
  <source src="myMovie.mp4">
</video>

 <script>
   var video = document.getElementsByTagName('video')[0];
  </script>


 <a href="#" onclick="if (video.paused) video.play(); else video.pause()"> Play/Pause</a>
</body>
</html>

There are other controls you can add to your VIDEO element. You can add a playback head to track where you are in the video, for example, as well as fast-forward and rewind. There’s no doubt that as HTML5 VIDEO element matures, we’ll develop tools for quickly creating skins and themes for video players.

Encoding Video and Audio for Web Delivery

Before HTML5, you would have to use a combination of OBJECT and EMBED elements to add video to your webpage. Video requires support of a plugin such as Adobe’s Flash. HTML5 sidesteps support for third-party plugins (such as Windows Media Player, Flash or RealPlayer) by adding video CODECs directly to the browser. A CODEC (Compression/Decompression) is the technology that allows video files to be converted into smaller, streamed files. Currently three CODECs are gaining support in HTML5. They are the H.264 video standard and two open-source solutions: Ogg Theora video and webM.

The H.264 support, also known as MPEG4, is the video and audio format supported on your iPhone and used by many companies. Unfortunately, MPEG4 has patents that protect the technology. This has lead to confusion about whether or not you can freely use MPEG4 video in your webpages. The patent group managing MPEG4, the MPEG-LA group, has stated they will NOT charge royalties for the use of MPEG4 video embedded into webpages. Check out the comprehensive FAQ Microsoft put together here:

http://www.microsoft.com/windows/windowsmedia/licensing/mpeg4faq.aspx ).

The alternatives to H.264 are Theora and webM formats. Technically, H.264 is cleaner at higher resolutions (you’d have to be a videophile to see the difference), but overall the quality difference between H.264 and Theora/WebM is minimal. Ultimately, consumers of video/audio content will determine which CODEC will become the format of choice.

The challenge we face now is identifying which browser supports which video format. Here’s a brief breakdown:

Reactions

Post a Comment

0 Comments

Please add nice comments or answer ....