Audio element
The audio element is used for adding audio tracks to the web page. Just like the picture element the audio element has multiple source elements that provide the same track in multiple formats. The browser chooses the first source that it supports. If the browser has no support for audio, we can specify a fallback message to show to the users. Usually an empty attribute controls is used to provide users with options to control playback of audio.
<audio controls> <source src="example.mp3" type="audio/mp3"> <source src="example.ogg" type="audio/ogg"> <p>Your browser does not support HTML5 audio.</p> </audio>
There are legal issues with MP3 since it is a patented format. Many browsers don’t support patented formats. The Ogg format is an open format. But it is not supported in proprietary browsers like Microsoft Edge or Safari. So providing both formats of audio will ensure it works on all browsers.
Video element
Similar to the audio element HTML5 has a video element that is used to add video. It looks almost exactly the same as the audio element.
<video controls> <source src="example.mp4" type="video/mp4"> <p> Your browser doesn't support HTML5 video.</p> </video>
If we want to provide only one video source we can directly specify the source by using src attribute in video element itself.
The audio and video elements were introduced only in the recent HTML5 version. Before that plugins like Adobe Flash and Microsoft Silverlight were used for audio and video. These plugins are outdated now and they have many security flaws. You may encounter them on older websites. Just don’t use them for new websites you create. Many users do not install plugins for that purpose anymore. So stick with HTML5 audio and video elements.
Similar to how there are issues with using patented audio formats, there are issues with patented video formats. Some open browsers don’t support patented formats like MP4. There are other options like WebM and Ogg for video. But many browsers like Microsoft Edge and Safari don’t support open formats. The solution is to provide multiple video files in different formats.
<video controls> <source src="example.webm" type="video/webm"> <source src="example.mp4" type="video/mp4"> <p> Your browser does not support HTML5 video.</p> </video>
If you want to know about different formats and compatibility with browsers, you can use this page from Mozilla Developers Network.
Audio and Video attributes
- controls
- It is an attribute that provides audio/vidio playback controls for the users. If it is not specified users cannot control the audio/video on their browsers.
- autoplay
- The audio/video starts playing immediately after page load. This can annoy some users. So use this only if your website is focussed on video.
- loop
- The audio/video repeats playing from the start once it ends. This can also be annoying for some users. Use it only when neccessary
- preload
- Used for specifying the buffering policy for large files. It accepts none, auto or metadata as its value.
There are some attributes that are available only for video elements:
- muted
- The audio is muted by default and the user has to turn it on to hear it.
- height
- Used for setting the height of the video.
- width
- Used for setting the width of the video.
- poster
- We can specify an image as a poster for the video before it starts playing.
As you can see from this lesson adding video and audio that can work on all browsers is slightly complicated. There are also other problems like high bandwidth requirements. If you are hosting your website using a hosting company, they may have restrictions on the bandwidth. Video and audio can quickly drain the available bandwidth. This can lead to the website being taken down or extra billing for the hosting account. So many people prefer online services like YouTube, Dailymotion, and Vimeo for video hosting and SoundCloud for audio hosting. They will handle the hosting part and provide a code that you can paste into your site to insert your media.