HTML 5 Video and Audio

0 166

HTML5 Video Audio Element Supported Video Audio Formats Video Size setting

in this tutorial we will learn about HTML5 Video Audio Element Supported Video Audio Formats Video Size setting and related about other videos Audios Supported Video Formats and Element

HTML 5 Video

In the earlier version of HTML web browser were capable only of handling graphic and texts. Before if the user had to play the video then a third party plugin or ActiveX had to be installed, Earlier web developer used to build a website using adobe flash player to play audio and video on the website.
New version of HTML has introduced new <audio> and <video> elements. In other words, HTML5 has provided to the developers with the features to embed media on the Web pages in a standard manner. thus the user doesn’t need anymore to depend on flash player to access video and audio files.

The HTML <video> Element

HTML 5 added new <video> element to embed video on a webpage.

HTML 5 Supported Video Formats

<video> Element support three kind video formats supported by web browsers.

Browsers Support MP4 WebM Ogg
Opera 10.6 No Yes Yes
Apple Safari 5 Yes No No
Google Chrome 6 Yes Yes Yes
FireFox 4.0 No Yes Yes
Internet Explorer 9 Yes No No

HTML Video Size setting

To apply height and width to your video height and width attributes used with <video> element

Video Tag Attributes

HTML 5 supported video tag attributes with <video> elements are:

Video Attributes Description
autoplay Specifies that the browser will start playing the video as soon as it is ready.
muted Allows to mute the video initially if this attribute is existing.
controls Allows displaying the controls of the video if the attribute exists.
loop Specifies that the browser should repeat playing the existing video once more if the loop attribute exists and accepts a boolean value.
preload Specifies whether the video should be loaded or not when the page is loaded.
src Specifies the location of the video file to be embedded.

The Track Element

The Track element used in html 5 to add captions, subtitles, chapters, and screen reader descriptions in audio and video elements.
Track element attributes are:

Container Description
src Contains the URL of the text track data.
srclang Contains the language of the text track data.
kind Contains the type of content the track definition is used for.
default Indicates that this will be the default track if the user does not specify the value.
label Specifies the title to be displayed for the user Table.

HTML 5 Audio

Audio Element in HTML 5

The <audio> element allows a web developer to embed an audio on the website.

Audio supported Formats

There is three type audio format and they are supported with <audio> element.
The list below supported by the web browser.

Browsers Support MP3 Wav Ogg
Opera 10.6 No Yes Yes
Apple Safari 5 Yes Yes No
Google Chrome 6 Yes Yes Yes
FireFox 4.0 No Yes Yes
Internet Explorer 9 Yes No No

Audio Tag Attributes

New HTML 5 <audio> element has the following attributes.

Audio Attributes Description
autoplay This attribute identifies whether to start the audio or not once the object is loaded. The attribute accepts a boolean value which when specified will automatically start playing the audio as soon as possible without stopping.
auto buffer This attribute starts the buffering automatically.
controls This attribute identifies the audio playback controls that should be displayed such as resume pause play and volume buttons.
loop This attribute identifies whether to replay the audio once it has stopped.
preload This attribute identifies whether the audio has to be loaded when the page loads and is ready to execute. This preload attribute is ignored if autoplay exists.
src This attribute specifies the location or the URL of the audio file that has to be embedded.

Creating Audio Files

If the user wants to play audio in the old browser then <embed> tag used and it has two attributes src and autostart.



Leave A Reply

Your email address will not be published.