<!DOCTYPE html>
<html>
<head>
<title>
Creating custom video controls
</title>
<script type="text/javascript">
var video;
window.onload = function() {
video = document.getElementsByTagName("video")[0];
var btn_play = document.getElementById("btn_play");
var btn_pause = document.getElementById("btn_pause");
var btn_mute = document.getElementById("btn_mute");
var btn_volume = document.getElementById('volume');
btn_play.addEventListener('click', doPlay, false);
btn_pause.addEventListener('click', doPause, false);
btn_mute.addEventListener('click', doMute, false);
btn_volume.value = video.volume;
btn_volume.addEventListener('change',function(e) {
myVol= e.target.value;
video.volume=myVol;
if (myVol==0) {
video.muted = true;
} else {
video.muted = false;
}
return false;
}, true);
};
function doPlay() {
if (video.paused) {
video.play();
} else if (video.ended) {
video.currentTime=0;
video.play();
};
};
function doPause() {
if (video.play) {
video.pause();
};
};
function doMute() {
document.getElementById('volume').value = 0;
video.muted = true;
};
</script>
</head>
<body>
<div id="video_container">
<video width="320" height="176" src="test1.webm" />
</div>
<div id="video_controller">
<button id="btn_play"> Play </button>
<button id="btn_pause"> Pause </button>
<input type="range" min="0" max="1" step="0.1" id="volume">
<button id="btn_mute"> Mute </button>
</div>
</body>
</html>