As we know HTML5 is rich with media elements. Using HTML5 we can easily embed Audio or Video to web pages. In this example I created a Video Player using HTML5 Video element. To operate a video in this player I did implemented play, forward, rewind & pause buttons functionality using JavaScript. Logic I implemented is very simple. In HTML body I have a video element with source video file (laugh-vid.mp4) path. Including this 4 buttons are there Reload, Rewind, Play & Forward. On click of these buttons I calling the respective functions.
Play button behaves dynamically. Once you click on this video starts playing. During this the same button act like pause button. Reload button is responsible to start video from beginning. About rewind & forward buttons I have a function forwardRewind(), it accepts param as parameter. In case user click on rewind button I am passing -7 to back the track. Similarly for forward button I am passing +7. You can change this value depending your video length.
HTML5 video player Demo App
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 video player with play, forward, rewind & pause buttons</title>
<script type="text/javascript">
/*Function for Play & Pause Buttons*/
function play() {
var videoPlayer = document.getElementById("videoPlayer");
var btnPlay = document.getElementById("btnPlay");
if (videoPlayer.paused) {
videoPlayer.play();
btnPlay.textContent = "||";
} else {
videoPlayer.pause();
btnPlay.textContent = ">";
}
}
/*Function to Reload video from Beginning*/
function reloadVideo() {
var videoPlayer = document.getElementById("videoPlayer");
videoPlayer.currentTime = 0;
}
/*Function to Forward & Rewind*/
function forwardRewind(param) {
var videoPlayer = document.getElementById("videoPlayer");
videoPlayer.currentTime += param;
}
</script>
</head>
<body>
<video id="videoPlayer">
<source src="laugh-vid.mp4" type="video/mp4" />
</video>
<!--Buttons for Video Player-->
<div id="playerButtons">
<button id="btnReload" onclick="reloadVideo();">[]</button>
<button id="btnRewind" onclick="forwardRewind(-7)"><<</button>
<button id="btnPlay" onclick="play()">></button>
<button id="btnForward" onclick="forwardRewind(7)">>></button>
</div>
</body>
</html>
