Custom HTML5 Video Controller
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()
{
nbsp;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>