HTML5 Audio and Video
Written By: Avinash Malhotra
Updated on
Audio and Video
HTML5 Audio and Video are two new media elements used to add media content like a song or a movie to webpages. Both elements allow embedding media without third-party plugins. Chrome 3+, Firefox 3.5+, Safari 4+, and IE 9+ support both Audio and Video tags.
Previously, third-party plugins like Flash were required to play audio or video on websites. The <embed> tag was used to include Flash files, and browsers needed Adobe Flash Player installed. YouTube videos were often embedded using <iframe> tags.
Say No to Flash
Even Flash has been largely phased out. Chrome 55+ blocks Flash content by default and requires user permission to run it. With HTML5 Audio and Video tags, multimedia has become a native part of the web.
HTML5 Audio
HTML5 Audio tag is used to play audio files such as MP3, OGG, and AAC. All supporting browsers include a built-in player.
The simplest way to include an Audio Tag is to use the <audio> element. The src attribute is required. The controls attribute displays a control bar allowing users to play/pause, adjust the timeline, mute, and change volume.
HTML5 Audio Example
<audio src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fsound.mp3" controls></audio>
<audio controls>
<source src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fsongname.mp3" type="audio/mp3">
<source src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fsongname.ogg" type="audio/ogg">
</audio>
Audio Attributes
| Attribute | Values | Use |
|---|---|---|
| src | song.mp3 | to link Audio file with player Required |
| 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="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fvideo.mp4" controls width="720" height="405"></video>
Video with multiple source
<video controls width="1280" height="720">
<source src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fvideo.webm" type="video/webm">
<source src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fvideo.mp4" type="video/mp4">
</video>
Video for Desktop and mobile
<video controls width="1280" height="720">
<source src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fvideo-lg.webm" media="(min-width: 768px)">
<source src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fvideo.webm">
</video>
Video Attributes
| Attributes | Values | Use |
|---|---|---|
| src | file.mp4 | to link Video file with player Required |
| controls | To show play /pause buttons, timeline, volume controller and full screen buttons on video player. | |
| autoplay | To play video on page load. ( Autoplay only works if the 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="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fvideo.mp4" type="video/mp4">
<track kind="captions" src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fenglish.vtt" srclang="en" label="English">
<track kind="captions" src="proxy.php?url=https%3A%2F%2Ftutorial.techaltum.com%2Fhindi.vtt" srclang="hi" label="हिंदी">
</video>
Tracks will only work with the http:// or https:// protocols.
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:30.000
Web Designing, Web Development, Software Testing Training Institute.
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 Browser Compatibility
HTML5 Audio & Video are supported in Chrome, Safari, Firefox 4+, Opera, and IE9+. For IE8 and below, use conditional comments with iframe tags as fallbacks.