Online Certificate Courses HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials. 

What is HTML5 Audio & Video

As part of the feature of HTML5, Native audio and video support is available without the need for Flash

The HTML5 <audio> and <video> tags make it really easy to add media to a web page. Although, you need to specify the src attributes to get the media source and also include attribute so that the user can play and pause the media

Embedding Video

The code below is the simplest way of embedding a video file in a webpage:

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser has no support for the <video> element.   
</video>

The latest HTML5 draft specification doesn't really list out which video formats browsers should have support for in the video tag. But the most popularly used video formats are: 

1. Ogg − Ogg files with Theodora video codec and Vorbis audio codec.

2. mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.

You can make use of the <source> HTML5 tag to specify media together with the media type and also other attributes. A video element accept multiple source element and the browser will make use of the format it recognizes first:

<!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>

Video Attribute Specification

The HTML5 video tag can possess a number of attributes to control the look and feel and also various functionalities of the control:

Sr.No. Attribute & Description
1

autoplay

This is a boolean attribute, if it is specified, the video will automatically start to playback as soon as it can do so without stopping to finish loading the data.

2

autobuffer

This is a boolean attribute if it is specified, the video will automatically start buffering even if it's not set to play automatically.

3

controls

If this attribute is available, it will let the user control video playback, including volume, seeking, and pause/resume playback.

4

height

This attribute deals with specifying the height of the video's display area, in pixels.

5

loop

This is a boolean attribute, if it is specified, it will allow video automatically seek back to the start after reaching the end.

6

preload

This attribute deals with specifying 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 or placeholder 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 particular attribute specifies the width of the video's display area, in pixels.

Embedding Audio

HTML5 has support for the <audio> tag which is mainly used to add sound content in an HTML or XHTML document, an example is below:

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

You can make use of the <source> HTML5 tag to specify media together with the media type and also other attributes. A video element accept multiple source element and the browser will make use of the format it recognizes first:

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html> 

Audio Attribute Specification 

The HTML5 video tag can possess a number of attributes to control the look and feel and also various functionalities of the control:

Sr.No. Attribute & Description
1

autoplay

This is a boolean attribute, if it is specified, the audio will automatically begin to playback as soon as it can do so without stopping to finish loading the data.

2

autobuffer

This is a boolean attribute, if it is specified, the audio will automatically begin buffering even if it's not set to automatically play.

3

controls

If this attribute is available, it will let the user control audio playback, including volume, seeking, and pause/resume playback.

4

loop

This is a boolean attribute, if it is specified, it will allow audio automatically to seek back to the start after reaching the end.

5

preload

This attribute is meant for specifying that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.

6

src

The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

 

Handling Media Events 

The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using JavaScript −

S.No. Event & Description
1

abort

This event is triggered when playback is aborted.

2

can play

This event is triggered when enough data is available that the media can be played.

3

ended

This event is triggered when the playback completes.

4

error

This event is triggered when an error occurs.

5

loaded data

This event is triggered when the first frame of the media has finished loading.

6

loadstart

This event is triggered when the loading of the media begins.

7

pause

This event is triggered when playback is paused.

8

play

This event is triggered when playback starts or resumes.

9

progress

This event is triggered periodically to inform the progress of downloading the media.

10

ratechange

This event is triggered when the playback speed changes.

11

seeked

This event is triggered when a seek operation completes.

12

seeking

This event is triggered when a seek operation begins.

13

suspend

This event is triggered when the loading of the media is suspended.

14

volumechange

This event is triggered when the audio volume changes.

15

waiting

This event is triggered when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

The code below allows playing of a given video:

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

90% Scholarship Offer!!

The Scholarship offer is a discount program to take our Course Programs and Certification valued at $70 USD for a reduced fee of $7 USD. - Offer Closes Soon!!

Copyrights © 2021. SIIT - Scholars International Institute of Technology is a subsidiary of Scholars Global Tech. All Rights Reserved.