HTML 5 – Video , Audio
Built in Video/Audio
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 controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video> You can use 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 .
Multiple Sources
HTML 5 supports multiple sources, multiple sources is use full to specify the multiple files with multiple formats and paths. So that you can specify the multiple formats of the same file hosted on different location, in this case if your browser do not support a specific format then it will use another source same for that path.
Video Attribute Specification
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.
autobuffer: This Boolean attribute if specified, the video will automatically begin buffering even if it’s not set to automatically play.
controls: it will allow the user to control video playback, including volume, seeking, and pause/resume playback.
height:This attribute specifies the height of the video’s display area, in CSS pixels.
loop:This Boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end.
preload: This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.
poster: This is a URL of an image to show until the user plays or seeks.
src: The URL of the video to embed. This is optional; you may instead use the element within the video block to specify the video to embed.
width: This attribute specifies the width of the video’s display area, in CSS pixels.
Embedding Audio
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
Audio Attribute Specification
autoplay: This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobuffer: This Boolean attribute if specified, the audio will automatically begin buffering even if it’s not set to automatically play.
controls: If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
loop: This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.
preload: This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if auto play is present.
src: The URL of the audio to embed. This is optional; you may instead use the element within the video block to specify the video to embed.
In next post we will try to understand about the storage in HTML5