[HTML5] Media – Video and Audio

Video becomes the essential part of WWW but in HTML4, we have to rely on separate applications to play videos. Now HTML5 has made video and audio the integral part of browsers. Browsers, not the plug-ins, can play the media directly.

1. Video

If you play a video clip in your website in HTML4, you need to use <object> tag and a lot of <param> tags to specify the players and options.

HTML5 introduced the new <video> and <source> tags.  The media files are specified by the “src” attribute.

You can use the following attributes for <video> to fine-tune the video-playing.

  • autoplay : specifies that the video will start playing as soon as it is ready
  • controls : specifies that video play controls should be displayed
  • height : sets the height of the video player
  • width : sets the width of the video player
  • loop : specifies that the video will start over again, every time it is finished
  • muted : specifies that the audio output of the video should be muted
  • poster : specifies an image to be shown while the video is downloading, or until the user hits the play button
  • preload : loads the video as the page is loading
  • src : specifies the URL of the video file

Any text between the <video> and </video> tags will be displayed in browsers that do not support <video>.

<video src="media/bear.mp4" width="320px" height="240px" controls="controls">
The video cannot be played.
</video>

Actually, the recommended way to specify the media file is to use the <source> tag.  The <source> tag allows you to specify alternative media files which the browser may choose from, based on its media type or codec support.

The <source> tag has the following attributes:

  • src : specifies the URL of the media file
  • type : specifies the MIME type of the media resource (video/ogg, video/mp4, video/webm)
<video width="320px" height="240px" controls="controls">
  <source src="media/bear.mp4" type="video/mp4" />
  <source src="media/bear.ogg" type="video/ogg" />
  <source src="media/bear.webm" type="video/webm" />
  The video cannot be played.
</video>

 

2. Audio

The <audio> tag is used to play the audio files.

Available attributes are:

  • autoplay : specifies that the audio will start playing as soon as it is ready
  • controls : specifies that audio play controls should be displayed
  • loop : specifies that the audio will start over again, every time it is finished
  • preload : loads the ausio as the page is loading
  • src : specifies the URL of the audio file

Any text between the <audio> and </audio> tags will be displayed in browsers that do not support <audio>.

<audio src="media/jazz.mp3" controls="controls" autoplay="autoplay">
The audio cannot be played.
</audio>

You can use the <source> tag to specify the audio files. The common audio types are “audio/ogg” and “audio/mpeg“.

<audio controls="controls" autoplay="autoplay">
  <source src="media/jazz.mp3" type="audio/mpeg" />
  <source src="media/jazz.ogg" type="audio/ogg" />
  The audio cannot be played.
</audio>

 

3. Video / Audio Containers(Codecs) and Types

When you specify the <source>, it is a good idea to provide the “type” attribute too.

(1) Video

  • MP4 (H.264 + AAC) : “video/mp4
  • Ogg (Theora + Vorbis) : “video/ogg
  • WebM (VP8 + Vorbis) : “video/webm

(2) Auido

  • WAV : “audio/wav
  • MP3 : “audio/mpeg
  • Ogg Vorbis : “audio/ogg
  • MPEG-4 AAC(Advanced Audio Coding) : “audio/mp4
  • WebM Vorbis : “audio/webm

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s