Customizing A Video Player

+1 HyJax LTD · October 29, 2014
I am using the tutorial form Bucky on creating a custom video player using jscript and HTML5.

I have finished and made my own player.  I would like to add a custom icon, like maybe a play arrow, to the progress indicator that adveaces with the timing of the video.

Here is a pic of what Im after.  Note I did not add a custom image, only circled where I want it to be.
/images/forum/upload/2014-10-29/8925b7cc0e8260eb0c86dae0944e218a.jpg


function doFirst(){
 barSize=560;
 myMovie=document.getElementById('myMovie');
 playButton=document.getElementById('playButton');
 Bar=document.getElementById('defaultBar');
 progressBar=document.getElementById('progressBar');
 playButton.addEventListener('click', playOrPause, false);
 Bar.addEventListener('click', clickedBar, false);
}
function playOrPause(){
 if (!myMovie.paused && !myMovie.ended){
  myMovie.pause();
  playButton.innerHTML='Play';
  window.clearInterval(updateBar);
 }else{
  myMovie.play();
  playButton.innerHTML='Pause';
  updateBar=setInterval(update, 500);
 }
}
function update(){
 if (!myMovie.ended){
  var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
  progressBar.style.width=size+'px';
 }else {
  progressBar.style.width='0px';
  playButton.innerHTML='Play';
  window.clearInterval(updateBar);
 }
}
function clickedBar(e){
 if(!myMovie.paused && !myMovie.ended){
  var mouseX=e.pageX-Bar.offsetLeft;
  var newtime=mouseX*myMovie.duration/barSize;
  myMovie.currentTime=newtime;
  progressBar.style.width=mouseX+'px';
 }
}
window.addEventListener('load', doFirst, false);

My guess is to add it to the 'function update' command?

Post a Reply

Replies

Oldest  Newest  Rating
0 Abdullah Nauman · October 29, 2014
Instead of setting playButton as a button input type just  set it as an img and keep the id. 
-1 HyJax LTD · October 30, 2014
That will change the PLAY BUTTON. I want to add a graphic to the tip of  progress bar as it gets bigger as the video plays.
0 HyJax LTD · October 30, 2014

function update(){
 if (!myMovie.ended){
  var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);
  progressBar.style.width=size+'px';
 }else {
  progressBar.style.width='0px';
  playButton.innerHTML='Play';
  window.clearInterval(updateBar);
 }
}

HTML file:

   </div>
   <div id="defaultBar">
    <div id="progressBar"></div>
    <div id="progressIcon"></div>
   </div>
   <div style="clear:both"></div>


Would I add something like somewhere in this function:

progressIcon.stytle.position=currentTime

After defining in CSS what the (progressIcon) image is of course. Im going to go check the operators available after I eat but this popped into my head.

Do I need to change the "clear:both" in the HTML to anything different?
  • 1

Javascript

107,093 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators