HTML5 Audio and Video | Add audio and video in html

Audio Video
Audio
Video
Subtitles

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 Mozilla, 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>

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

Audio Attributes

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		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 webm, 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 with src


<video src="video.mp4" controls width="720" height="405"></video>

Video with multiple source


<video controls width="1280" height="720">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Video for Desktop and mobile


<video controls width="1280" height="720">
    <source src="video-lg.webm" media="(min-width: 768px)">
    <source src="video.webm">
</video>

Video Attributes

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		To play video on page load. ( autoplay will only works if video is muted )
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

Subtitles

To add Subtitles in videos, use track tag with .vtt extension. track tag can add subtitles in multiple languages. See Example

Video Subtitles


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

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

Subtitle Sample


     WEBVTT
     00:00.000 --> 00:08.000
     Tech Altum, An IIT Alumni's & ISO Certified IT Training Institute
     00:09.000 --> 00:13.000
     10 Years Experience in IT Training and Placements.
     00:14.000 --> 00:19.000
     Corporate Trainers From IIT/NIT Alumni with minimum 10+ Experience.
     00:20.000 --> 00:24.000
     Conducting Corporate Training in MNCs and Engineering Collages.
     00:24.670 --> 00:16.000
     Web Designing, Web Development, Software Testing Training Institute.

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>	       
    const 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.