HTML5 – Video and Audio Tags

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

AttributeDescription
autoplayThe video will automatically begin to play without stopping. It is boolean attribute.
autobufferThe video will automatically begin to buffer even if it’s not set to play .It is boolean attribute.
controlsIt is used to display video controls such as pause/resume,volume,seekingetc
heightIt specifies height of video player in pixels to display the video.
widthIt specifies width of video player in pixels to display the video.
posterIf 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.
preloadIt specifies how video should be loaded when the page loads and ready to run. If auto play is present then it will be ignored.
loopIt specifies that whether the video should be keep re-playing ,every time it is finished. This is boolean attribute.
srcIt 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 :

FormatType
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

HTML5 Audio Tags

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

Audio Attributes

AttributeDescription
autoplayThe audio will automatically begin to play without stopping. It is boolean attribute.
autobufferThe audio will automatically begin to buffer even if it’s not set to play .It is boolean attribute.
controlsIt is used to display audio controls such as pause/resume, volume, seeking etc
preloadIt specifies how audio should be loaded when the page loads and ready to run. If auto play is present then it will be ignored.
loopIt specifies that whether the audio should be keep re-playing ,every time it is finished. This is boolean attribute.
srcIt 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.

AttributeDescription
onabortScript to be run on abort event.
oncanplayScript to be run when file is ready to start playing when it has enough buffer to begin.
oncanplaythroughIt triggers when file can be played to the end without pausing for buffering.
ondurationchangeScript to be run when length of the media changes.
onemptiedScript to be run when file is suddenly unavailable.
onendedThis fires when media end is reached.
onerrorScript to be run when error occurs as file is being loaded.
onloadeddataThis triggers when media data is loaded.
onloadedmetadataScript to be run when meta data like dimensions and duration are loaded.
onloadstartTriggers when the browser starts to load before anything is actually loaded.
onpauseIt fires when media is paused either by the user and programmatically.
onplayingTriggers when media actually has started playing.
onplayTriggers when media is ready to start playing.
onprogressIt fires when browser is ready for getting the data.
onratechangeIt triggers when media data’s playing rate has changes like when user switches slow or forward mode.
onreadystatechangeIt fires when each time ready state changes. It tracks the state of media data.
onseekedScript to be run when seeking attribute is set to false indicating that seeking has ended.
onseekingScript to be run when seeking attribute is set to true indicating that seeking is active .
onstalledScript to be run when media data is unable to fetch the data.
onsuspendIt triggers when the fetching media data is stopped before it is completely loaded.
ontimeupdateScript to be run when playing position changes to different point in the media.
onvolumechangeIt triggers when volume is changed (include setting volume to mute).
onwaitingScript 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

Comments

comments

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.

Speak Your Mind

*