This is a simple video player built using HTML5 and javascript. copy and paste this code into your code editor and run. before running this code replace the video source by your own video i.e <source src="media/myvideo.mp4" type="video/mp4"> and also the replace the the button images. or simply rename the buttons as play,pause,stop,forward,reverse.
Description of java script functions:
playVideo():
here we first declare a variable that is vid and we store the value of document.getElementById("video");. we call this variable because this is much easier to write then to write document.getElementById("video") each time we call a function. so here is the vid.play() function is used to play the video. play() is a javascript built in function to paly any video.
pauseVideo()
vid.pause() function is used to pause the video and is quite similar to play function because both play and pause are both built in function.
stopVideo()
To stop a video we have to think tricky because when we press the stop button it works two things, first it pauses the video and then it takes the video to the initial position. so here we first use the vid.pause() function to pause the video and then we change the current time to 0. i.e if the video was at 30 seconds the vid.currentTime=0; takes this to the 0 position.
fwdVideo()
fwdvideo() function is used to forward the video this means we are increasing the current time of the video. so we simply use the increment operator in javascript i.e ++ to increment the current time by 1s. vid.currentTime++ means increase the current time by 1 second.
revVideo()
revVideo function is used to rewind the video this means we are decreasing the
current time of the video. so we simply use the decrementt operator in
javascript i.e -- to decrement the current time by 1s. vid.currentTime-- means decrease the current time by 1 second.
setDuration()
setDuration() function is used to set the total time of the video. Here we call the id totalTime and set the total time by using the function vid.duration. Math.round() is a javascript function to round off the number.
updateTime()
updateTime() function is used to check for the current time of the video. For this we set the id timeText for current time and call the function vid.currentTime().
volumeUp()
This function is used to increase the volume of the video.here vid.volume+=.1 means increment the vid.volume to .1. Here the range is between 0.1-0.9. And the next we use Math.round(vid.volume*10) this converts the range to 1-10 and round of the values.
<!DOCTYPE html>
<html>
<head>
<title>Media Player</title>
<style>
body
{
background:-webkit-linear-gradient(left,blue,green);
background:-moz-linear-gradient(left,blue,green);
<!--this is the CSS3 linear gradient color -webkit is for chrome and -moz is
used for mozila firefox. -->
}
.media
{
width: 450px;
height: 480px;
margin: auto;
}
.player
{
background-color: #480000 ;
padding:20px;
width: 350px;
height: 300px;
}
.btn
{
float: left;
}
</style>
</head>
<body>
<div class="media">
<div class="player">
<!--This is the video tag used in HTML5, we set the width and height for the video,
the setDuration() function is used to determine the total length of the video
and the updataTime() function is used to check the current time of the video-->
<video id="video" width="345" height="200" onloadedmetadata="setDuration();" ontimeupdate="updateTime();">
<source src="media/myvideo.mp4" type="video/mp4">
Browser not supporting..:(
</video><br>
<p>total time<span id="totalTime">x</span/> seconds<br/>
current time <span id="timeText">xx</span> seconds</p>
<div class="btn">
<!--these are the buttons and when you click a button it calls a javascript function-->
<button type="button" onclick="playVideo();"><img src="media/player_play.png" width="30" height="30"></button>
<button type="button" onclick="pauseVideo();"><img src="media/player_pause.png" width="30" height="30"></button>
<button type="button" onclick="stopVideo();"><img src="media/player_stop.png" width="30" height="30"></button>
<button type="button" onclick="fwdVideo();"><img src="media/player_forward.png" width="30" height="30"></button>
<button type="button" onclick="revVideo();"><img src="media/player_backward.png" width="30" height="30"></button>
<button type="button" onclick="volumeUp();"><img src="media/audio_volume_high.png" width="30" height="30"></button>
<button type="button" onclick="volumeDown();"><img src="media/audio_volume_low.png" width="30" height="30"></button>
</div>
</div>
</div>
<script>
vid=document.getElementById("video");
function playVideo()
{
vid.play();
}
function pauseVideo()
{
vid.pause();
}
function stopVideo()
{
vid.pause();
vid.currentTime=0;
}
function fwdVideo()
{
vid.currentTime++;
}
function revVideo()
{
vid.currentTime--;
}
function setDuration()
{
document.getElementById("totalTime").innerHTML=Math.round(vid.duration);
}
function updateTime()
{
document.getElementById("timeText").innerHTML=Math.round(vid.currentTime);
}
document.getElementById("volume").innerHTML=Math.round(vid.volume*10);
function volumeUp()
{
vid.volume+=.1;
document.getElementById("volume").innerHTML=Math.round(vid.volume*10);
}
function volumeDown()
{
vid.volume-=.1;
document.getElementById("volume").innerHTML=Math.round(vid.volume*10);
}
</script>
</body>
</html>
