Audio and Video in HTML5

<audio> and <video> tags of HTML5 allows us to incorporate native audio and video support without Flash.

To include audio and video we need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.

The simplest way of embedding a video file in a webpage:

<video src="video.mp4" width="320" height="200" controls preload></video>

<audio src="audio.mp3" controls preload></audio>

We can use <source> tag to indicate media along with media type and many other attributes. A video/Audio element allows various source elements and browser will use the first recognized format:

<video width="618" height="347" controls preload> 

    <source src="video.mp4" media="only screen and (min-device-width: 568px)"></source>

    <source src="video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source>

</video>

<audio controls preload> 

    <source src="audio.mp3"></source> 

    <source src="audio.ogg"></source> 

</audio>

Attribute Specification:

Autoplay: The video/audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

Autobuffer: The video/audio will automatically begin buffering even if it's not set to automatically play.

Controls: It will allow the user to control video/audio playback, including volume, seeking, and pause/resume playback.

Loop: It will allow video/audio automatically seek back to the start after reaching at the end.

Preload: This attribute specifies that the video/audio will be loaded at page load, and ready to run. Ignored if autoplay is present.

Src: The URL of the video/audio to embed.

Height: Height of the video's display area in pixels.

Width: Width of the video's display area in pixels.

Poster: URL of an image which will be displayed while the video is loading.

Categories: HTML5