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
Java 7 New Features