Java Tutorial Blog

HTML5 – Video and Audio Tags

//  by 

HTML5 Video

HTML5 <video> element is used to add media to the web pages. Before HTML5 there were no standard tags for showing video/movies on the web pages. Before HTML5 video files were supported only by plug-ins like flash player which is used to play video on the web pages. HTML5 provides <video> tag which describes how video should be played. The <video> element allows multiple <source> elements. The <source> element can link to different video files.

The simplest form of embedding video in the webpage is as follows :

<video> width=”300” height=”250” controls>
   <source src=”vid.mp4” type=”video/mp4”>
   <source src=”vid.mp4” type=”video/mp4”>
   Your browser does not support.
</video>

Syntax of <video> Tag

<video controls>Body Content</video>

Video Formats

There are three video formats supported by the element :

  • MP4: MPEG 4 files with H264 video codec and AAC audio codec.
  • WebM: WebM files with VP8 video codec and Vorbis audio codec.
  • Ogg: Ogg files with Theora video codec and Vorbis audio codec.

HTML5 video Tags

  • <video>: It defines video or movie.
  • <source>: It defines resources for media elements such as and .
  • <track>: It defines text tracks in media players.

Video Attributes

Attribute Description
autoplay The video will automatically begin to play without stopping. It is boolean attribute.
autobuffer The video will automatically begin to buffer even if it’s not set to play .It is boolean attribute.
controls It is used to display video controls such as pause/resume,volume,seekingetc
height It specifies height of video player in pixels to display the video.
width It specifies width of video player in pixels to display the video.
poster If no video data is available it displays frame of the video(such as .jpg, .png images).The value must be a valid URL of an image.
preload It specifies how video should be loaded when the page loads and ready to run. If auto play is present then it will be ignored.
loop It specifies that whether the video should be keep re-playing ,every time it is finished. This is boolean attribute.
src It specifies URL of the video file. It specifies location of the video file.

Example of Video Tag

<!DOCTYPE html>
<html>
<body>

	<video width="320" height="240" controls>
		<source src="movie.mp4" type="video/mp4">
		<source src="movie.ogg" type="video/ogg">
		Your browser does not support the video tag.
	</video>

</body>
</html>

The above example uses <video> tag. Using which we will be playing a video called: movie.mp4.

Example Application Test

  • Save the file as video_example.html in your system.
  • Just open the file in the browser, you will see the video playing in the browser. Note that the browser must support HTML5 specification.

Output

After successful execution of the program you will see the video playing in the browser.

HTML5 Audio

HTML5 <audio> element is used to specify audio to the web pages. Before HTML5 there were no standard tags for playing audio files on the web pages. Before HTML5 audio files were supported by only plug-ins like flash player which is used to play audio on the web pages. HTML5 defines standard element to add audio file on a web page using element.

The simplest form of embedding audio in the webpage is as follows :

<audio controls>
   <source src="audio1.mp3" type="audio/mpeg">
   <source src="audio2.ogg" type="audio/ogg">
   Your browser does not support.
</audio>

Syntax of <audio> Tag

<audio conrols>Body Content</audio>

Audio Formats

The following are audio formats supported by the element :

Format Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML5 Audio Tags

  • <video>: It defines sound content.
  • <source>: It defines resources for media elements such as and .

Audio Attributes

Attribute Description
autoplay The audio will automatically begin to play without stopping. It is boolean attribute.
autobuffer The audio will automatically begin to buffer even if it’s not set to play .It is boolean attribute.
controls It is used to display audio controls such as pause/resume, volume, seeking etc
preload It specifies how audio should be loaded when the page loads and ready to run. If auto play is present then it will be ignored.
loop It specifies that whether the audio should be keep re-playing ,every time it is finished. This is boolean attribute.
src It specifies URL of the audio file. It specifies location of the audio file.

Example of Audio Tag

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

	<audio controls autoplay>
		<source src="audio1.mp3" type="audio/mpeg" />
		<source src="audio1.ogg" type="audio/ogg" />
		Your browser does not support.
	</audio>

</body>
</html>

The the above example we would be playing the audio file audio1.mp3 using the <audio> tag.

Example Application Test

  • Save the file as audio.html in your system.
  • Just open the file in the browser, you will see the video playing in the browser. Note that the browser must support HTML5 specification.

Output

After successful execution of the program you will see the video playing in the browser.

Handling Media Event Attributes

The HTML5 video and audio tags have number of attributes to control functionality using Javascript. Following table lists them.

Attribute Description
onabort Script to be run on abort event.
oncanplay Script to be run when file is ready to start playing when it has enough buffer to begin.
oncanplaythrough It triggers when file can be played to the end without pausing for buffering.
ondurationchange Script to be run when length of the media changes.
onemptied Script to be run when file is suddenly unavailable.
onended This fires when media end is reached.
onerror Script to be run when error occurs as file is being loaded.
onloadeddata This triggers when media data is loaded.
onloadedmetadata Script to be run when meta data like dimensions and duration are loaded.
onloadstart Triggers when the browser starts to load before anything is actually loaded.
onpause It fires when media is paused either by the user and programmatically.
onplaying Triggers when media actually has started playing.
onplay Triggers when media is ready to start playing.
onprogress It fires when browser is ready for getting the data.
onratechange It triggers when media data’s playing rate has changes like when user switches slow or forward mode.
onreadystatechange It fires when each time ready state changes. It tracks the state of media data.
onseeked Script to be run when seeking attribute is set to false indicating that seeking has ended.
onseeking Script to be run when seeking attribute is set to true indicating that seeking is active .
onstalled Script to be run when media data is unable to fetch the data.
onsuspend It triggers when the fetching media data is stopped before it is completely loaded.
ontimeupdate Script to be run when playing position changes to different point in the media.
onvolumechange It triggers when volume is changed (include setting volume to mute).
onwaiting Script to be run when media has paused but expected to resume when media pauses to buffer more data.

 

Previous Tutorial : HTML5 Figure Tag  :: Next Tutorial : HTML5 Drag and Drop Events

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.