HTML5 video controller allows user to interact with your embedded video just like YouTube video player allows you to start, pause and end video playing.
HTML5 video controller allows you to add start, pause and end video buttons. However, these buttons are very plain and may not feet overall design of your HTML5 web page.
Thankfully, HTML5 goes extra mile by allowing us to control the appearance of these buttons on the form.
First, let us look at the regular video tag that allows us view video file on HTML5 compatible browser.
<video width=400"
height="200"
src="myVideoFile.mp4"
controls />
Browsers render this video tag differently based on the browser type and version. We can override this undesired behavior and make sure that our video control is rendered the same on all browsers.
Let’s see how we can use HTML5 to accomplish this task.
First, you need to use HTML5 media attributes and DOM events. For example, there several important attributes that we’ll need while building custom video controller.
- media.paused
- media.defaultPlaybackRate
- Media. playbackRate
- media.ended
- Media.play()
- Media.volume
- Media.muted
- Media.currentTime
These attributes are all very important for our JavaScript code that will use them to modify the way date and time control looks and behaves.
Example of this JavaScript code is below:
<script>
if
(video.paused)
{
video.play();
}
else if
(video.ended)
{
video.currentTime=10; //Sets position from which to
stat video playing.
video.play();
</script>
Here is complete example in HTML5 and JavaScript and you can use as your boilerplate for coding your own custom video control.
<!DOCTYPE html>
<html>
<head>
<title>Custom HTML5 my_video Control
</title>
<script
type="text/javascript">
var
my_video;
window.onload = function()
{
my_video =
document.getElementsByTagName("video")[0];
var btnPlay = document.getElementById("btnPlay");
var btnPause = document.getElementById("btnPause");
var btnMute = document.getElementById("btnMute");
var btn_btnVolume = document.getElementById('btnVolume');
btnPlay.addEventListener('click', doVideoPlay, false);
btnPause.addEventListener('click', doVideoPause,
false);
btnMute.addEventListener('click', doVideoMute,
false);
btn_btnVolume.value =
my_video.btnVolume;
btn_btnVolume.addEventListener('change',function(e)
{
myVol= e.target.value;
my_video.btnVolume=myVol;
if (myVol==0)
{
my_video.muted = true;
}
else
{
my_video.muted = false;
}
return
false;
}, true);
};
function doVideoPlay()
{
if (video.paused)
{
my_video.play();
}
else if (video.ended)
{
my_video.currentTime=0;
my_video.play();
};
};
function doVideoPause()
{
if (video.play)
{
my_video.pause();
};
};
function doVideoMute()
{
document.getElementById('btnVolume').value
= 0;
my_video.muted = true;
};
</script>
</head>
<body>
<video
width="400"
height="200"
src="myVideoAudioFile.mp4"
/>
<button
id="btnPlay">Play</button>
<button
id="btnPause">Pause</button>
<input
type="range"
min="0"
max="2"
step="0.2"
id="btnVolume">
<button
id="btnMute">Mute</button>
</body>
</html>
Download HTML5 Video Controller sample code: 