IMC Home Page | Library Home Page | UAlbany Home Page
Introduction to
Basic HTML 5 & CSS3 Effects

Video and Audio

One of the most anticipated features of HTML5 is the ability to play video and audio without the need for extra players. The intention is that the media will play directly in the browser. This section will discuss the video tag and illustrate some examples.

Video

In earlier versions of HTML and XHTML video required the use of an outside player. Most often the player was either Flash! or QuickTime. It is necessary to periodically update the player or plugin. It is expected that once HTML5 is fully integrated into the browsers the entire process will be smother and require less attention.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

On the right is an example of a video in Flash! format. Notice that the video has controls at the bottom. These controls are components that are separate files from the video and the browser. In fact, the entire presentational formatting, such as the frame effect, is created by several additional files.

The code for this video is rather complicated. It is:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="322" height="276" class="fltrt" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=
Halo_Skin_3&amp;streamName=flash/red_car&amp;
autoPlay=false&amp;autoRewind=true" />
<param name="swfversion" value="8,0,0,0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="322" height="276">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=
Halo_Skin_3&amp;streamName=flash/red_car&amp;
autoPlay=false&amp;autoRewind=true" />
<param name="swfversion" value="8,0,0,0" />
<param name="expressinstall" value="../Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/
download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

One of the goals of HTML5 is to simplify the necessary code. You will see below how much less complicated HTML5 is.

There are three video formats currently supported in HTML5. They are:

Unfortunately, not all browsers support all three formats. This is not a significant problem as the coding makes allowances for this as will be demonstrated below. But first we will discover which formats your browser supports.

On the right is the same video in the MP4 format. If you do not see it, your browser either does not support the video tag in HTML5 or does not support MP4.

The code for the video follows this format:

<video src="mymovie.mp4" width="300" height-"225" controls="controls">

 

Special Note: One of the attributes that can be specified with the video tag is the size of the video display. If you copy the code from this page you must be sure to change the dimensions to match your requirements.

 

The next example on the right is the same video in the webm format. If you do not see it, your browser either does not support the video tag in HTML5 or does not support webm.

The code for the video follows this format:

<video src="mymovie.webm" width="300" height-"225" controls="controls">

 

 

The way that we avoid browser problems is by specifying all three of the video formats. To do that we list the source files in the video tag. Here's and example:

<video width="300" height="225" controls>
<source src="redcar.ogg" type="video/ogg" />
<source src="redcar.mp4" type="video/mp4" />
<source src="redcar.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

 

<-- Return to top of page -->