Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder


Chapters


HTML5 - Introduction

HTML5 - Syntax
HTML5 - Attributes
HTML5 - Events
HTML5 - Web Forms 2.0
HTML5 - MathML
HTML5 - Web Storage
HTML5 - Web SQL Database
HTML5 - Server Sent Events
HTML5 - WebSockets
HTML5 - Canvas
HTML5 - Audio & Video
HTML5 - Geolocation
HTML5 - Microdata
HTML5 - Drag & Drop
HTML5 - Web Workers
HTML5 - IndexedDB
HTML5 - Web Messaging
HTML5 - CORS
HTML5 - Web RTC


Outlines


What Is HTML5 Audio & Video

Embedding Video
Video Attribute Specification
Embedding Audio
Audio Attribute Specification 
Handling Media Events 

ENROLL NOW










Online Certification Courses

HTML5 - Audio & Video

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>
< Previous Page Next Page >
[ CHOOSE COURSE ]
ENROLL NOW

SIIT is on a mission to make technology education and professional training more accessible, so more people can show off their talents and take their tech careers to the next level. All courses are tailored to meet individual specific career needs, leading to Tech Skills Acquisition and Professional Certification.

Corporate Training for Business Growth and School