Audio and Video

HTML5 Audio and Video are two new media elements used to add media content like, a song, a movie etc. Both of these elements are used to add media content on a webpage. Chrome 3+, Firefox 3.5+, safari 4+ and IE 9+ supports both Audio and Video tags.

Now we don't need any third party plugin, like flash to play audio or video in our website. Earlier <embed> tags was used to include a flash file. Also a plugin ( Adobe Flash Player ) is required to run flash file. Chrome browser comes with build in flash player, but for IE, and Mozila, we need to install Adobe Flash Player to run that video or audio. Youtube was also used by maximum sites to play video using <iframe> tag.

Say No to Flash

Even Flash is almost removed from web market. Chrome 55 and above block flash content on a website and require permission to run flash. With the introduction of Audio and video tags, sharing multimedia becomes an integral part of web.


HTML5 Audio

HTML5 Audio tag is used to play audio files, like mp3, ogg and AAC. All browsers supporting audio tag are having build in player.

The easiest way to include Audio Tag in a webpage is to use audio tag. src is compulsory attribute in audio tag. controls attribute can show control bar to user. User can play/pause, change time line, mute, and increase volume of audio playing using controls.

HTML5 Audio Example



     
    <audio src="sound.mp3" controls></audio>
		
or
     
    <audio controls>
        <source src="songname.mp3" type="audio/mp3">
        <source src="songname.ogg" type="audio/ogg">
    </audio>
		

Attributes in Audio

Attribute Values Use
src song.mp3 to link Audio file with player Compulsory
controls To show play/pause buttons, timeline and volume controller of the player.
autoplay "on" or "off". To play audio automatically.
loop To play audio continuously even after it ends.
muted boolean attribute to mute audio.
controlsList nodownload To disable download button in chrome 55 onwards

JavaScript functions for audio tag

To add custom functionality, we can also use javascript properties and methods. Here are some javascript functions with example.


Audio custom controls

To play an audio file, use play function. To pause audio, use paused function.




<script>	       
    var audio=document.querySelector("audio");
    
    audio.play();        // play audio
    audio.pause();       // pause audio
    audio.paused;        // true or false
    audio.currentTime;   // current time of audio
    audio.duration;      // current time of audio
    audio.volume;        // volume of audio
    
</script>	       
	   

HTML5 Video

HTML5 Video tag or <video> is used to add videos on a webpage. Video tag supports mp4, ogg, mov and H.264 files.

To embed a video, create a video tag. src is compulsory attribute for video tag. controls attribute can add play/pause button, video timeline, mute button, volume controller, full screen, subtitles options on player



<video src="video.mp4" controls></video>
		
		
or

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
</video>
		
		

Html5 Video Player


Attributes in Video Tag

Attributes Values Use
src file.mp4 to link Video file with player Compulsory
controls To show play /pause buttons, timeline, volume controller and full screen buttons on video player.
autoplay "on" or "off" To play video on page load.
loop To play video continuously even after it ends.
muted To mute video.
width Defines width of video player.
height Defines height of video player.
controlsList nodownload To disable download button in chrome 55 onwards
poster image.jpg shows an image( jpg or png) on page loading. Will not work if autoplay is on
audio muted audio="muted" attribute will mute audio of video.
track sub.vtt track tag is used in video to add subtitles of video. . See Example

Video Subtitles


<video width="400" controls  >
    <source src="video.mp4" type="video/mp4" >
       <track kind="captions" src="english.vtt" srclang="en-us" label="English" >
       <track kind="captions" src="hindi.vtt" srclang="hi" label="हिंदी" >
    </video>		  
		  

Track will work only in http:// or https:// protocol.

View Sub.vtt file

Download Sub.vtt file


JavaScript functions for video tag

To add custom functionality in video, we can use javascript properties and methods. Here are some JavaScript functions with example.


Video custom controls

To play a video file, use play function. To pause video, use paused function.




<script>	       
    var video=document.querySelector("video");
    
    video.play();                    // play video
    video.pause();                   // pause video
    video.paused;                    // true or false
    video.volume;                    // volume of video
    video.currentTime;               // current time of video
    video.duration;                  // video duration (in secs)
    video.requestFullscreen();       // full screen video
    video.webkitRequestFullscreen(); // full screen for safari
    video.requestPictureInPicture(); // Picture in Picture
    
</script>	       
	   

HTML5 Audio and Video Browsers Compatibility

Chrome, Safari, Firefox 4, Opera, and IE9 support HTML5 Audio & Video. But we need to add iframe tag using conditional comments for IE 8 and below.