HTML5 Tut# 29: Adding More To Custom Player

+3 HyJax LTD · October 25, 2014
I want to add a custom image to the very front of the progress bar for the player.  What do I add to the CSS and/or JSCRIPT to achieve this.

Im including an example:

/images/forum/upload/2014-10-25/84e1fe296924ddceec9d11245e131b0d.jpg

Post a Reply

Replies

Oldest  Newest  Rating
0 HyJax LTD · October 26, 2014
Or maybe point to the tutorial that might give this a heads up?
+1 Bucky Roberts · November 6, 2014
Can you post your source code?
0 HyJax LTD · November 6, 2014
It is basically the code from the tutorial.  I have a guess or two but haven't had the time to try.

Here is the jscript:


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 a progressIcon function in the dofirst operation(s).
Maybe name it progressIcon and define it in HTML and CSS as to what image file will  be used.
In function update; I would think something like progressIcon=myMovie.currenttime ; or something like that.  Do you need the HTML or CSS, as I said, its about exactly from the tutorial.
0 HyJax LTD · November 18, 2014
Thank you.
  • 1

HTML / CSS / Web Design

107,196 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators