Write a short note on audio & video tags.
Answers
Explanation:
HTML5 features include native audio and video support without the need for Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.
Embedding Video
Here is the simplest form of embedding a video file in your webpage −
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are −
Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format −
Live Demo
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
This will produce the following result −
Video Attribute Specification
The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control −
Sr.No. Attribute & Description
1
autoplay
This Boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
2
autobuffer
This Boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play.
3
controls
If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback.
4
height
This attribute specifies the height of the video's display area, in CSS pixels.
5
loop
This Boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end.
6
preload
This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.
7
poster
This is a URL of an image to show until the user plays or seeks.
8
src
The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.
9
width
This attribute specifies the width of the video's display area, in CSS pixels.