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:


Post a Reply


Oldest  Newest  Rating
+1 Bucky Roberts · November 6, 2014
Can you post your source code?
0 HyJax LTD · October 26, 2014
Or maybe point to the tutorial that might give this a heads up?
0 HyJax LTD · November 18, 2014
Thank you.
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(){
 playButton.addEventListener('click', playOrPause, false);
 Bar.addEventListener('click', clickedBar, false);
function playOrPause(){
 if (!myMovie.paused && !myMovie.ended){
  updateBar=setInterval(update, 500);
function update(){
 if (!myMovie.ended){
  var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);'px';
 }else {'0px';
function clickedBar(e){
 if(!myMovie.paused && !myMovie.ended){
  var mouseX=e.pageX-Bar.offsetLeft;
  var newtime=mouseX*myMovie.duration/barSize;
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.
  • 1

HTML / CSS / Web Design


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