Audio and video
HTML5 supports audio and video elements. Prior to HTML5, we used plugins, such as Flash player, extensively. The audio and video elements reduce the dependence on plugins to a large extent by allowing the developer to embed media elements into HTML documents.
EXAMPLE
<!DOCTYPE html>
<html>
<title> HTML5 Audio player </title>
<body>
<audio autoplay = "autoplay" controls = "controls" id = "player">
<source src = "fstread.ogg" />
<source src = "fstread.mp3" />
<p> Your browser doesn't support the audio tag </p>
</audio>
<div>
<button onclick = "document.getElementById ('player').play()">Play</button>
<button onclick = "document.getElementById('player')
.pause()">Pause</button>
<button onclick = "document.getElementById('player'). volume+ = 0.1">Vol+ </button>
<button onclick = "document.getElementById('player'). volume- = 0.1">Vol- </button>
</div>
</body>
</html>
The output of the code in Mozilla Firefox, Internet Explorer, Opera, and Google Chrome respectively is shown in the following screenshot:
If you observe the preceding code, we have included the OGG as well as the MP3 format for the audio track. The reason to include both formats is that the MP3 format is not open source and is patented. Hence, all the browsers do not support the MP3 format at the time of writing this chapter. However, some of the browsers do support the open source OGG file format.
The controls attribute allows the user to control the audio player. For example, we can play and pause the player, as and when required. The volume can be adjusted as per the discretion of the user.
The autoplay attribute will play the song automatically without the need to click on the Play icon.
The source src attribute is used for the location of the audio track.
As we see, it is easy to create an audio player with minimalistic code using HTML5. In the audio code, we have used the following snippet:
<div>
<button onclick = "document.getElementById('player').play()">Play</button>
<button onclick = "document.getElementById('player').pause()">Pause</button>
<button onclick = "document.getElementById('player'). volume+ = 0.1">Vol+ </button>
<button onclick = "document.getElementById('player'). volume- = 0.1">Vol- </button>
</div>
We have used the preceding code in the div element to modify the player and add manual controls that are not inbuilt with the audio player and thereby, we can see the Play, Pause, Vol+, and Vol- buttons.
______________________________________________________________________________________________________
Let's have a look at the procedure to develop a video player using HTML5.
The video player code is very similar to the audio player code. Let's look at the following code to understand how it works:
<!DOCTYPE html>
<html>
<head>
<title> Video Player in HTML5 </title>
<style> video {
box-shadow:0 0 15px #333; border-radius:10px;
}
</style>
</head>
<body>
<video width = "700" height = "400" id = "fastrd" controls = "controls" autoplay = "autoplay">
<source src = "fastread_Sample.ogv"/>
<source src = "fastread_Sample.mp4"/>
</video>
<div>
<button onclick = "document.getElementById('fstrd').play()">Play</button>
<button onclick = "document.getElementById('fstrd').pause()">Pause</button>
<button onclick = "document.getElementById('fstrd'). volume+ = 0.1">Vol+ </button>
<button onclick = "document.getElementById('fstrd'). volume- = 0.1">Vol- </button>
</div>
</body>
</html>
We have some attributes that are different from the audio element. Apart from controls and autoplay, we have the poster attribute. The poster attribute helps us to link the video to a customized thumbnail image. In Firefox, the video player will be displayed as shown in the following screenshot:
The look may vary depending on the browser in use. The video player looks different in Chrome and Opera. Let's look at the other features of HTML5.