HTML5 Video Duration

  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 77 days ago

I have a question I hope you can help me with.

I have created an HTML5 Video Player.
One of the things I need is the video duration time.

At the moment this is how I do it.

Code: [ Select ]
<button onclick="getDuration()">Video Length</button>

function getDuration() {
   var s = document.getElementById("mdabdvid");
   alert("Video Length: " + Math.ceil((s.duration)*(100))/100 + " seconds")
  }
  1. <button onclick="getDuration()">Video Length</button>
  2. function getDuration() {
  3.    var s = document.getElementById("mdabdvid");
  4.    alert("Video Length: " + Math.ceil((s.duration)*(100))/100 + " seconds")
  5.   }


The problem is I have to click a button to get the total video duration in an alert window

What I would like to have is the video duration displayed without having to click a button.

This can be either when the webpage is loaded or after the video begins to play.

I have tried many methods I found on the internet but none worked.
I am a newbie with javascript and maybe I was not implementing correctly as they only give you partial scripts and probably assume that I know all about javascript.

Could you help here

Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 77 days ago

  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 77 days ago

I figured out how to automatically display the html5 video duration on web page load as follows:

Code: [ Select ]
var myVideo = document.getElementById("mdabdvid");
myVideo.addEventListener("loadedmetadata", function()
 {
 dur = (Math.round(myVideo.duration*100)/100) + " seconds";
 alert(dur);
 }
 );
  1. var myVideo = document.getElementById("mdabdvid");
  2. myVideo.addEventListener("loadedmetadata", function()
  3.  {
  4.  dur = (Math.round(myVideo.duration*100)/100) + " seconds";
  5.  alert(dur);
  6.  }
  7.  );


The problem I have is that I can only display it with the alert() function which I do not want to do and is annoying.

I want to be able to display the video location on a particular section of the web page.

Can someone help me out here

Thanks
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 77 days ago

You have complete access to the DOM with:

getElementsByTagName();
getElementsByClassName();
getElementById();

It should be trivial for you to grab a hold of the element you wish to inject the video duration into with one of those functions.
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 76 days ago

Thanks for your reply Nightslyr

But you need to remember that although you may be good at javascript, there are a lot of newbies, including me, that are just learing, so it is not always trivial.

After a lot of searching I finally figured out how to do it. It also involved using the innerHTML feature.

If I may, I would like to ask another question.

On my HTML5 video player I have both volume control button and also an external volume control slider bar.

Both buttons and slider bar work, but they do so independently.

I was hoping that if I changed the volume using the buttons that the volume slider bar would also change automatically to follow the buttons, but this does not seem to happen.

I also added an external video seek bar.
If I speed up the video using a fast forward button, the seek bar does change accordingly as does the seek bar on the video player since I also use the controls on the player.
The video seek bar follows all events.

The reason I am asking is that if I lower the volume using the volume slider bar and then increase the volume using the button, the slider bar remains at the lower volume position event though the volume was changed to maximum.
This can get a bit confusing.

I am hoping there is a way to synchronize the slider and buttons.

Would appreciate your comments

Thanks
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 75 days ago

JAVASCRIPT Code: [ Select ]
 
    var dur, myVideo = document.getElementById("mdabdvid"); // Have you tried moving the dur variable out of the event listener?
    myVideo.addEventListener("loadedmetadata", function()
     {
     dur = (Math.round(myVideo.duration*100)/100) + " seconds";
     alert(dur);
     }
     );
 
 
  1.  
  2.     var dur, myVideo = document.getElementById("mdabdvid"); // Have you tried moving the dur variable out of the event listener?
  3.     myVideo.addEventListener("loadedmetadata", function()
  4.      {
  5.      dur = (Math.round(myVideo.duration*100)/100) + " seconds";
  6.      alert(dur);
  7.      }
  8.      );
  9.  
  10.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 75 days ago

I'm currently building an html5 video player that is skinned i am using jquery to handle a lot of the work for the entire project
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 75 days ago

What I wanted was to get rid of the alert function and to always display the movie duration.

After hours of looking on the internet I finally came up with a solution that not only gives the move duration but also the current time of the movie as follows for anyone interested:

Code: [ Select ]
//Get Duration and Current Time To display
var myVideo = document.getElementById("mdabdvid");//The movie
var textduration = document.getElementById("duration");//Movie Duration Text
var textcurrenttime = document.getElementById("currenttime");//Movie Current Time Text

myVideo.addEventListener("loadedmetadata",
function(){textduration.innerHTML = "Duration (min:sec) = " + convertTime(myVideo.duration);},
false);

myVideo.addEventListener("timeupdate",
function(){textcurrenttime.innerHTML = "Current Time (min:sec) = " + convertTime(myVideo.currentTime);},
false);

function convertTime(org){
var minute = Math.floor(org/60) % 60;
var second = Math.floor(org%60);
return( minute + ' : ' + second);
}
  1. //Get Duration and Current Time To display
  2. var myVideo = document.getElementById("mdabdvid");//The movie
  3. var textduration = document.getElementById("duration");//Movie Duration Text
  4. var textcurrenttime = document.getElementById("currenttime");//Movie Current Time Text
  5. myVideo.addEventListener("loadedmetadata",
  6. function(){textduration.innerHTML = "Duration (min:sec) = " + convertTime(myVideo.duration);},
  7. false);
  8. myVideo.addEventListener("timeupdate",
  9. function(){textcurrenttime.innerHTML = "Current Time (min:sec) = " + convertTime(myVideo.currentTime);},
  10. false);
  11. function convertTime(org){
  12. var minute = Math.floor(org/60) % 60;
  13. var second = Math.floor(org%60);
  14. return( minute + ' : ' + second);
  15. }


And to display the current time and duration on the webpage I used the following:

Code: [ Select ]
<span id="currenttime"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="duration"></span>


Does anyone have any comments on my volume slider bar issues I mentioned before

Thanks
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 75 days ago

could you post the volume control your having issues with?
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 74 days ago

Let me go over what I have now.
My browser is IE 11.

The video player:

Code: [ Select ]

<video id="mdabdvid" width="520" controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <source src="myVideo.ogv" type="video/ogv">  
</video>
  1. <video id="mdabdvid" width="520" controls>
  2.   <source src="myVideo.mp4" type="video/mp4">
  3.   <source src="myVideo.webm" type="video/webm">
  4.   <source src="myVideo.ogv" type="video/ogv">  
  5. </video>


I included the player controls so I could check the volume operations.


These are my volume up and down buttons:

Code: [ Select ]

<button onclick='volume_up()'>Volume Up</button>

<button onclick='volume_down()'>Volume Down</button>
  1. <button onclick='volume_up()'>Volume Up</button>
  2. <button onclick='volume_down()'>Volume Down</button>


The associated javascript for the volume functions:

Code: [ Select ]

var myVideo = document.getElementById("mdabdvid");//The movie

//Volume Increase function
function volume_up(){
myVideo.volume +=0.1;
}

//Volume Decrease function
function volume_down(){
myVideo.volume -=0.1;
}
  1. var myVideo = document.getElementById("mdabdvid");//The movie
  2. //Volume Increase function
  3. function volume_up(){
  4. myVideo.volume +=0.1;
  5. }
  6. //Volume Decrease function
  7. function volume_down(){
  8. myVideo.volume -=0.1;
  9. }



To test it I look at the volume bar in the video player as I click on the volume buttons.
I can see the volume bar on the player go up or down depending on what volume button I push.
This works OK since they are only button functions and it really does not matter what the player volume bar is at since the buttons wil eiter raise the bar or lower the bar, no confusion.


Now I added an external volume control slider.

This is my volume slider bar:

Code: [ Select ]

<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1" onchange="setVolume()">
  1. <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1" onchange="setVolume()">


The associated javascript for the volume slider bar:

Code: [ Select ]

function setVolume() {
  var volume = document.getElementById("volume-bar");
  myVideo.volume = volume.value;
}
  1. function setVolume() {
  2.   var volume = document.getElementById("volume-bar");
  3.   myVideo.volume = volume.value;
  4. }



To test the volume slider bar I again look at the volume bar in the video player.
If I manually move the external volume slider bar, I can see the volume bar in the player move accordingly.

However, if I move the volume bar in the player, the external volume slider bar doe not move.
This is where it can get confusing.

What needs to happen is that the external volume slider bar be synchronized with the player volume bar so that one affects the other.

If I use the volume buttons, I see the volume bar on the player go up and down, but the external volume slider does not move.

Ideally then, I need all the external volume buttons, external volume slider bar and the player volume bar all synchronized so that they all interact together.

Using the buttons should cause both external volume slider bar and player volume bar to change accordingly.
The external volume slider bar should cause the player volume bar to change accordingly and vice versa.

Below is a webpage I created for testing.
You will have to add your own video to do your testing:

Code: [ Select ]

<!DOCTYPE html>

<head>

</head>


<body>

<center>

<video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  <source src="Why You Need Mobile Browser Detection.mp4" type="video/mp4">
  <source src="Why You Need Mobile Browser Detection.webm" type="video/webm">
  <source src="Why You Need Mobile Browser Detection.ogv" type="video/ogv">  
</video>

<br /><br /> 

<button onclick='volume_up()'>Volume Up</button>
<button onclick='volume_down()'>Volume Down</button>

<br /><br />

<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1" onchange="setVolume()"> 

</center>

<script>

var myVideo = document.getElementById("mdabdvid");

function volume_up(){
myVideo.volume +=0.1;
}

function volume_down(){
myVideo.volume -=0.1;
}

function setVolume() {
  var volume = document.getElementById("volume-bar");
  myVideo.volume = volume.value;
}

</script>



</body>

</html>
  1. <!DOCTYPE html>
  2. <head>
  3. </head>
  4. <body>
  5. <center>
  6. <video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  7.   <source src="Why You Need Mobile Browser Detection.mp4" type="video/mp4">
  8.   <source src="Why You Need Mobile Browser Detection.webm" type="video/webm">
  9.   <source src="Why You Need Mobile Browser Detection.ogv" type="video/ogv">  
  10. </video>
  11. <br /><br /> 
  12. <button onclick='volume_up()'>Volume Up</button>
  13. <button onclick='volume_down()'>Volume Down</button>
  14. <br /><br />
  15. <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1" onchange="setVolume()"> 
  16. </center>
  17. <script>
  18. var myVideo = document.getElementById("mdabdvid");
  19. function volume_up(){
  20. myVideo.volume +=0.1;
  21. }
  22. function volume_down(){
  23. myVideo.volume -=0.1;
  24. }
  25. function setVolume() {
  26.   var volume = document.getElementById("volume-bar");
  27.   myVideo.volume = volume.value;
  28. }
  29. </script>
  30. </body>
  31. </html>


Can anything be done?

Thanks
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 74 days ago

Sorry for the crude response doing this from my phone you currently only have a one way street meaning the player dose not talk back to your code in the volume area just like the time update snippet you must set a listener for volumechange
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 74 days ago

My phone submitted before I was done
JAVASCRIPT Code: [ Select ]
myVideo.addEventListener("volumechange", function() {
document.getElementById("volume-bar").value = myVideo.volume;});
 
  1. myVideo.addEventListener("volumechange", function() {
  2. document.getElementById("volume-bar").value = myVideo.volume;});
  3.  


This may or may not work this was done with my phone so it is untested and the concept is there

::UPDATE:: I just tested this and it does in fact work
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 74 days ago

Worked perfectly

thanks
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 74 days ago

here is my test file I made a few changes to make the volume slider to go up 1% at a time instead of 10% the button are changed to do the same. I also made the slider run in real time instead up waiting until you let go of the mouse (onchange)

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
 
var myVideo, volume_bar, volume_numbers, volumeMouse = false;
 
 
function dom_load() {
   myVideo = document.getElementById("mdabdvid");
   volume_bar = document.getElementById("volume-bar");
   volume_numbers = document.getElementById("volume-numbers");
   
   myVideo.addEventListener("volumechange", function() {
      volume_bar.value = myVideo.volume * 100;
      volume_numbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
   });
   
}
 
function volume_up(){
   myVideo.volume += 0.01;
}
 
function volume_down(){
   myVideo.volume -=0.01;
}
 
function setVolume() {
   if(volumeMouse) {
      myVideo.volume = volume_bar.value / 100;
   }
}
 
 
</script>
</head>
 
<body onload="dom_load()">
<video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  <source src="somevideo.mp4" type="video/mp4">
</video>
<br /><br />
<button onclick='volume_up()'>Volume Up</button>
<button onclick='volume_down()'>Volume Down</button>
<br /><br />
<input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false;" />
<output for="volume-bar" id="volume-numbers">100</output>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7.  
  8. var myVideo, volume_bar, volume_numbers, volumeMouse = false;
  9.  
  10.  
  11. function dom_load() {
  12.    myVideo = document.getElementById("mdabdvid");
  13.    volume_bar = document.getElementById("volume-bar");
  14.    volume_numbers = document.getElementById("volume-numbers");
  15.    
  16.    myVideo.addEventListener("volumechange", function() {
  17.       volume_bar.value = myVideo.volume * 100;
  18.       volume_numbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
  19.    });
  20.    
  21. }
  22.  
  23. function volume_up(){
  24.    myVideo.volume += 0.01;
  25. }
  26.  
  27. function volume_down(){
  28.    myVideo.volume -=0.01;
  29. }
  30.  
  31. function setVolume() {
  32.    if(volumeMouse) {
  33.       myVideo.volume = volume_bar.value / 100;
  34.    }
  35. }
  36.  
  37.  
  38. </script>
  39. </head>
  40.  
  41. <body onload="dom_load()">
  42. <video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  43.   <source src="somevideo.mp4" type="video/mp4">
  44. </video>
  45. <br /><br />
  46. <button onclick='volume_up()'>Volume Up</button>
  47. <button onclick='volume_down()'>Volume Down</button>
  48. <br /><br />
  49. <input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false;" />
  50. <output for="volume-bar" id="volume-numbers">100</output>
  51. </body>
  52. </html>
  53.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 74 days ago

bored at work and continued to add to it lol
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
 
var myVideo, volume_bar, volume_numbers, volumeMouse = false, mouseTimer;
 
 
function dom_load() {
   myVideo = document.getElementById("mdabdvid");
   volume_bar = document.getElementById("volume-bar");
   volume_numbers = document.getElementById("volume-numbers");
   
   myVideo.addEventListener("volumechange", function() {
      volume_bar.value = myVideo.volume * 100;
      volume_numbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
   });
   
}
 
function volume_up() {
   var vol = myVideo.volume + 0.01;
   myVideo.volume = Math.min(vol, 1);
   if(volumeMouse) {
      mouseTimer = setTimeout(volume_up, 50);
   }
}
 
function volume_down() {
   var vol = myVideo.volume - 0.01;
   myVideo.volume = Math.max(0, vol);
   if(volumeMouse) {
      mouseTimer = setTimeout(volume_down, 50);
   }
}
 
function setVolume() {
   if(volumeMouse) {
      myVideo.volume = volume_bar.value / 100;
   }
}
 
 
</script>
</head>
 
<body onload="dom_load()">
<video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  <source src="Gir.mp4" type="video/mp4">
</video>
<br /><br />
<button onmousedown="volumeMouse=true; volume_up();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Up</button>
<button onmousedown="volumeMouse=true; volume_down();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Down</button>
<br /><br />
<input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false; " />
<output for="volume-bar" id="volume-numbers">100</output>
</body>
</html>
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7.  
  8. var myVideo, volume_bar, volume_numbers, volumeMouse = false, mouseTimer;
  9.  
  10.  
  11. function dom_load() {
  12.    myVideo = document.getElementById("mdabdvid");
  13.    volume_bar = document.getElementById("volume-bar");
  14.    volume_numbers = document.getElementById("volume-numbers");
  15.    
  16.    myVideo.addEventListener("volumechange", function() {
  17.       volume_bar.value = myVideo.volume * 100;
  18.       volume_numbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
  19.    });
  20.    
  21. }
  22.  
  23. function volume_up() {
  24.    var vol = myVideo.volume + 0.01;
  25.    myVideo.volume = Math.min(vol, 1);
  26.    if(volumeMouse) {
  27.       mouseTimer = setTimeout(volume_up, 50);
  28.    }
  29. }
  30.  
  31. function volume_down() {
  32.    var vol = myVideo.volume - 0.01;
  33.    myVideo.volume = Math.max(0, vol);
  34.    if(volumeMouse) {
  35.       mouseTimer = setTimeout(volume_down, 50);
  36.    }
  37. }
  38.  
  39. function setVolume() {
  40.    if(volumeMouse) {
  41.       myVideo.volume = volume_bar.value / 100;
  42.    }
  43. }
  44.  
  45.  
  46. </script>
  47. </head>
  48.  
  49. <body onload="dom_load()">
  50. <video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  51.   <source src="Gir.mp4" type="video/mp4">
  52. </video>
  53. <br /><br />
  54. <button onmousedown="volumeMouse=true; volume_up();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Up</button>
  55. <button onmousedown="volumeMouse=true; volume_down();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Down</button>
  56. <br /><br />
  57. <input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false; " />
  58. <output for="volume-bar" id="volume-numbers">100</output>
  59. </body>
  60. </html>
  61.  
  62.  
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 73 days ago

I must say when you put your mind on something you don't fool around

Great Work!!
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 73 days ago

I just get bored and coding is fun for me. I also am fresh on the subject since I am currently building a html5 video player for work but it is complex, and I know this sounds strange but simple at the same time lol. The embed I'm implementing is a simple span tag the class controls if the player gets embedded I the page or displays as a modal
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 73 days ago

I have run into a little situation with your volume controls

As I had mentioned before I also have an external video seek bar.

I use the window.onload in the <head> section to load the functions.

For your function you use <body onload="dom_load()">

After everything is loaded, your volume controls work great.

The problem I have is that it seems to affect my video seekbar in that it does not work anymore.

The only way seek bar works is if I remove your onload="dom_load" function but then volume controls do not work.

Can your script be change so that no onload function is needed.

thanks
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 73 days ago

Yes it is possible to do one of three ways

1) Move the code inside the dom_load function to your window.onload function and remove onload="dom_load()"

OR

2) Move the code in the window.onload function to the dom load function.

OR

3) Call dom_load from the window.onload function and remove onload="dom_load()"
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 73 days ago

The only one that worked was 1)

I am curious why this happened

thanks for your help
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 73 days ago

for lack of better term, order of operations.

One your page loads it loads from top to bottom which is the reasoning behind the onload to start with.

if you instantly trying to do something on as a page loads say something like
HTML Code: [ Select ]
<html>
<head>
<title>I'm blue if I was green I would die</title>
<script style="text/javascript">
document.getElementById("im_blue").style.backgroundColor = "#00FF00";
document.getElementById("im_blue").innerHTML = 'crap I died!'
</script>
</head>
<body>
<div id="im_blue" class="background-color:#0000FF; width:100px; height:100px;">&nbsp;</div>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <title>I'm blue if I was green I would die</title>
  4. <script style="text/javascript">
  5. document.getElementById("im_blue").style.backgroundColor = "#00FF00";
  6. document.getElementById("im_blue").innerHTML = 'crap I died!'
  7. </script>
  8. </head>
  9. <body>
  10. <div id="im_blue" class="background-color:#0000FF; width:100px; height:100px;">&nbsp;</div>
  11. </body>
  12. </html>
  13.  

you would get an error because the element doesn't exists yet and would need the onload function to fire the event OR move the script below the element on the page like
HTML Code: [ Select ]
<html>
<head>
<title>I'm blue if I was green I would die</title>
</head>
<body>
<div id="im_blue" style="background-color:#0000FF; width:100px; height:100px;">&nbsp;</div>
<script type="text/javascript">
document.getElementById("im_blue").style.backgroundColor = "#00FF00";
document.getElementById("im_blue").innerHTML = 'crap I died!'
</script>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <title>I'm blue if I was green I would die</title>
  4. </head>
  5. <body>
  6. <div id="im_blue" style="background-color:#0000FF; width:100px; height:100px;">&nbsp;</div>
  7. <script type="text/javascript">
  8. document.getElementById("im_blue").style.backgroundColor = "#00FF00";
  9. document.getElementById("im_blue").innerHTML = 'crap I died!'
  10. </script>
  11. </body>
  12. </html>
  13.  


The onload function(s) window.onload and <body onload="foobar()"> are basically the same thing.

your onload script is above the body tag most likely in the head the the page. when it gets too the <body onload="foobar()"> it overwrites the onload function before it wiping it out. If you were to move the window.onload into or below the body tag that function would over write the <body onload="foobar()">

Above
HTML Code: [ Select ]
<html>
<head>
<title>I'm blue if I was green I would die</title>
</head>
<script type="text/javascript">
window.onload = function() {
   document.getElementById("im_blue").style.backgroundColor = "#00FF00";
   document.getElementById("im_blue").innerHTML = 'crap I died!';
}
</script>
<script type="text/javascript">
function foobar() {
   document.getElementById("im_blue").style.backgroundColor = "#0000FF";
   document.getElementById("im_blue").innerHTML = "I'm Alive!";
}
</script>
<body onLoad="foobar()">
<div id="im_blue" style="width:100px; height:100px;">&nbsp;</div>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <title>I'm blue if I was green I would die</title>
  4. </head>
  5. <script type="text/javascript">
  6. window.onload = function() {
  7.    document.getElementById("im_blue").style.backgroundColor = "#00FF00";
  8.    document.getElementById("im_blue").innerHTML = 'crap I died!';
  9. }
  10. </script>
  11. <script type="text/javascript">
  12. function foobar() {
  13.    document.getElementById("im_blue").style.backgroundColor = "#0000FF";
  14.    document.getElementById("im_blue").innerHTML = "I'm Alive!";
  15. }
  16. </script>
  17. <body onLoad="foobar()">
  18. <div id="im_blue" style="width:100px; height:100px;">&nbsp;</div>
  19. </body>
  20. </html>
  21.  


Below
HTML Code: [ Select ]
<html>
<head>
<title>I'm blue if I was green I would die</title>
</head>
 
<script type="text/javascript">
function foobar() {
   document.getElementById("im_blue").style.backgroundColor = "#0000FF";
   document.getElementById("im_blue").innerHTML = "I'm Alive!";
}
</script>
<body onLoad="foobar()">
<div id="im_blue" style="width:100px; height:100px;">&nbsp;</div>
</body>
<script type="text/javascript">
window.onload = function() {
   document.getElementById("im_blue").style.backgroundColor = "#00FF00";
   document.getElementById("im_blue").innerHTML = 'crap I died!';
}
</script>
</html>
 
  1. <html>
  2. <head>
  3. <title>I'm blue if I was green I would die</title>
  4. </head>
  5.  
  6. <script type="text/javascript">
  7. function foobar() {
  8.    document.getElementById("im_blue").style.backgroundColor = "#0000FF";
  9.    document.getElementById("im_blue").innerHTML = "I'm Alive!";
  10. }
  11. </script>
  12. <body onLoad="foobar()">
  13. <div id="im_blue" style="width:100px; height:100px;">&nbsp;</div>
  14. </body>
  15. <script type="text/javascript">
  16. window.onload = function() {
  17.    document.getElementById("im_blue").style.backgroundColor = "#00FF00";
  18.    document.getElementById("im_blue").innerHTML = 'crap I died!';
  19. }
  20. </script>
  21. </html>
  22.  


Jquery is a nice way to go because it combines the onload info
JAVASCRIPT Code: [ Select ]
jQuery(document).ready(function() {
 //some info
});
 
 
jQuery(document).ready(function() {
 //more info ....
});
 
  1. jQuery(document).ready(function() {
  2.  //some info
  3. });
  4.  
  5.  
  6. jQuery(document).ready(function() {
  7.  //more info ....
  8. });
  9.  


I'm not good at explaining things too much because it makes sense to me but I hope this helps answer your curiosity
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 73 days ago

Hi Scott

I liked how you put the percentage on the volume slider

I would like to add % to my seek-bar video frame slider.

The following is my code;

Code: [ Select ]

<head>

<script>
window.onload = function()
{

var myVideo = document.getElementById("mdabdvid");

// Sliders
    var seekBar = document.getElementById("seek-bar");

// Event listener for the seek bar
    seekBar.addEventListener("change", function() {
        // Calculate the new time
        var time = myVideo.duration * (seekBar.value / 100);
  

    // Update the video time
        myVideo.currentTime = time;
    });

// Update the seek bar as the video plays
    myVideo.addEventListener("timeupdate", function() {
        // Calculate the slider value
        var value = (100 / myVideo.duration) * myVideo.currentTime;

        // Update the slider value
        seekBar.value = value;
    });

    // Pause the video when the seek handle is being dragged
    seekBar.addEventListener("mousedown", function() {
        myVideo.pause();
    });

    // Play the video when the seek handle is dropped
    seekBar.addEventListener("mouseup", function() {
        myVideo.play();
    });
}

</head>
  1. <head>
  2. <script>
  3. window.onload = function()
  4. {
  5. var myVideo = document.getElementById("mdabdvid");
  6. // Sliders
  7.     var seekBar = document.getElementById("seek-bar");
  8. // Event listener for the seek bar
  9.     seekBar.addEventListener("change", function() {
  10.         // Calculate the new time
  11.         var time = myVideo.duration * (seekBar.value / 100);
  12.   
  13.     // Update the video time
  14.         myVideo.currentTime = time;
  15.     });
  16. // Update the seek bar as the video plays
  17.     myVideo.addEventListener("timeupdate", function() {
  18.         // Calculate the slider value
  19.         var value = (100 / myVideo.duration) * myVideo.currentTime;
  20.         // Update the slider value
  21.         seekBar.value = value;
  22.     });
  23.     // Pause the video when the seek handle is being dragged
  24.     seekBar.addEventListener("mousedown", function() {
  25.         myVideo.pause();
  26.     });
  27.     // Play the video when the seek handle is dropped
  28.     seekBar.addEventListener("mouseup", function() {
  29.         myVideo.play();
  30.     });
  31. }
  32. </head>


And to display the seek-bar I use:

Code: [ Select ]

<input id="seek-bar" type="range" min="0" max="100" value="0" step="1">
  1. <input id="seek-bar" type="range" min="0" max="100" value="0" step="1">


Could you please modify my code above to also include the % value as you did for the volume control in javascript not JQuery as I am not familiar with that yet

Thanks
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 73 days ago

JAVASCRIPT Code: [ Select ]
var seekNumbers = document.getElementById("seek-numbers");
 
myVideo.addEventListener("timeupdate", function() {
        // Calculate the slider value
        var value = (100 / myVideo.duration) * myVideo.currentTime;
        // Update the slider value
        seekBar.value = value;
      seekNumbers.innerHTML = Math.round(value) + '%';
    });
 
  1. var seekNumbers = document.getElementById("seek-numbers");
  2.  
  3. myVideo.addEventListener("timeupdate", function() {
  4.         // Calculate the slider value
  5.         var value = (100 / myVideo.duration) * myVideo.currentTime;
  6.         // Update the slider value
  7.         seekBar.value = value;
  8.       seekNumbers.innerHTML = Math.round(value) + '%';
  9.     });
  10.  


after seekbar in html
HTML Code: [ Select ]
<output for="seek-bar" id="seek-numbers">100</output>
 
  1. <output for="seek-bar" id="seek-numbers">100</output>
  2.  
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 73 days ago

Worked like a charm

thanks
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 73 days ago

Hit Scott

Got another question.

On my player I use an external Play/Pause Button that changes button image depending on situation.

For example, if the Play image is shown and you press it, the video starts to play and the button image changes to the Pause Image and vice versa.

At the same time I press the external Play/Pause button, the Play/Pause button on the actual player changes accordingly.

However, if I press the Play/Pause button on the actual video player it has no affect on my external button.

I assume I need to listen to some event but I have not been able to figure out the script.

Below is my external Play/Pause button code:

Code: [ Select ]

//change image on play/pause button
function vidplay() {
    var myVideo = document.getElementById("mdabdvid");
    var button = document.getElementById("play");
    if (myVideo.paused) {
     myVideo.play();
     //button.textContent = "Pause";
     button.innerHTML = "<img src='/images/pause9.gif' width='32' height='28' />";
    } else {
     myVideo.pause();
     //button.textContent = "Play";
     button.innerHTML = "<img src='/images/play1.gif' width='32' />";
    }
  1. //change image on play/pause button
  2. function vidplay() {
  3.     var myVideo = document.getElementById("mdabdvid");
  4.     var button = document.getElementById("play");
  5.     if (myVideo.paused) {
  6.      myVideo.play();
  7.      //button.textContent = "Pause";
  8.      button.innerHTML = "<img src='/images/pause9.gif' width='32' height='28' />";
  9.     } else {
  10.      myVideo.pause();
  11.      //button.textContent = "Play";
  12.      button.innerHTML = "<img src='/images/play1.gif' width='32' />";
  13.     }



I have the similar issue with my external mute button.
It is only one way in that it controls the player control but not vice versa.

The following is my Mute On/Off button code:

Code: [ Select ]

//change image on Mute on/off
function vidmute() {
    var myVideo = document.getElementById("mdabdvid");
    var button = document.getElementById("mute");
    if (myVideo.muted) {
     myVideo.muted = false;
     //button.textContent = "Mute";
     button.innerHTML = "<img src='/images/unmuted.gif' width='32'/>";
    } else {
     myVideo.muted=true;
     //button.textContent = "Un-Mute";
     button.innerHTML = "<img src='/images/mute3.gif' width='32' height='28' />";

    }
  }
  1. //change image on Mute on/off
  2. function vidmute() {
  3.     var myVideo = document.getElementById("mdabdvid");
  4.     var button = document.getElementById("mute");
  5.     if (myVideo.muted) {
  6.      myVideo.muted = false;
  7.      //button.textContent = "Mute";
  8.      button.innerHTML = "<img src='/images/unmuted.gif' width='32'/>";
  9.     } else {
  10.      myVideo.muted=true;
  11.      //button.textContent = "Un-Mute";
  12.      button.innerHTML = "<img src='/images/mute3.gif' width='32' height='28' />";
  13.     }
  14.   }


Any suggestions
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 72 days ago

Forgot to give you my button codes:

Code: [ Select ]

<button id="play" onclick="vidplay()"><img src='/images/play1.gif' width='32'/></button>

<button id="mute" onclick="vidmute()"><img src="/images/unmuted.gif" width='32'/></button>
  1. <button id="play" onclick="vidplay()"><img src='/images/play1.gif' width='32'/></button>
  2. <button id="mute" onclick="vidmute()"><img src="/images/unmuted.gif" width='32'/></button>
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 72 days ago

anytime you want to get feed back from the player an event listener is needed. If you declare variables in for the buttons to be used and/then or attach them to elements in the on load you won't have to re-declare the element across the functions

JAVASCRIPT Code: [ Select ]
var playButton, muteButton;
 
window.onload = function() {
 
   playButton = document.getElementById("play");
   muteButton = document.getElementById("mute");
 
   myVideo.addEventListener('play', videoPausePlayHandler, false);
   myVideo.addEventListener('pause', videoPausePlayHandler, false);
   
   // Mute dosen't have a direct listener so you need to bank off of the volume change
   myVideo.addEventListener("volumechange", function() {
      volumeBar.value = myVideo.volume * 100;
      volumeNumbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
      if(myVideo.muted) {
         muteButton.innerHTML = "unmute";
      } else {
         muteButton.innerHTML = "mute";  
      }
   });
   
}
 
function videoPausePlayHandler(e) {
   if(e.type == 'play') {
      playButton.innerHTML = "pause";
   } else if (e.type == 'pause') {
      playButton.innerHTML = "play";
   }
}
 
 
 
 
  1. var playButton, muteButton;
  2.  
  3. window.onload = function() {
  4.  
  5.    playButton = document.getElementById("play");
  6.    muteButton = document.getElementById("mute");
  7.  
  8.    myVideo.addEventListener('play', videoPausePlayHandler, false);
  9.    myVideo.addEventListener('pause', videoPausePlayHandler, false);
  10.    
  11.    // Mute dosen't have a direct listener so you need to bank off of the volume change
  12.    myVideo.addEventListener("volumechange", function() {
  13.       volumeBar.value = myVideo.volume * 100;
  14.       volumeNumbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
  15.       if(myVideo.muted) {
  16.          muteButton.innerHTML = "unmute";
  17.       } else {
  18.          muteButton.innerHTML = "mute";  
  19.       }
  20.    });
  21.    
  22. }
  23.  
  24. function videoPausePlayHandler(e) {
  25.    if(e.type == 'play') {
  26.       playButton.innerHTML = "pause";
  27.    } else if (e.type == 'pause') {
  28.       playButton.innerHTML = "play";
  29.    }
  30. }
  31.  
  32.  
  33.  
  34.  
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 72 days ago

Hi Scott

I cannot get it to work

Either I do not understand still or your script is a little different that what I use.

As I stated, if I use my external Play/Pause button, and press Play, my external button changes to pause image, as does the play button on the video controls.

I want the opposite to be true also.

Do you really need to use window.onload function as this always seems to cause me issues
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 72 days ago

Here is the full test code
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
 
var myVideo, volumeBar, volumeNumbers, volumeMouse = false, mouseTimer, seekBar, seekNumbers, playButton, muteButton;
window.onload = function() {
   
   myVideo = document.getElementById("mdabdvid");
   seekBar = document.getElementById("seek-bar");
   seekNumbers = document.getElementById("seek-numbers");
   volumeBar = document.getElementById("volume-bar");
   volumeNumbers = document.getElementById("volume-numbers");
   playButton = document.getElementById("play");
   muteButton = document.getElementById("mute");
   
   myVideo.addEventListener("volumechange", function() {
      volumeBar.value = myVideo.volume * 100;
      volumeNumbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
      if(myVideo.muted) {
         muteButton.innerHTML = "unmute";
      } else {
         muteButton.innerHTML = "mute";  
      }
   });
   
   seekBar.addEventListener("change", function() {
        // Calculate the new time
        var time = myVideo.duration * (seekBar.value / 100);
 
    // Update the video time
        myVideo.currentTime = time;
    });
   
// Update the seek bar as the video plays
    myVideo.addEventListener("timeupdate", function() {
        // Calculate the slider value
        var value = (100 / myVideo.duration) * myVideo.currentTime;
        // Update the slider value
        seekBar.value = value;
      seekNumbers.innerHTML = Math.round(value) + '%';
    });
    // Pause the video when the seek handle is being dragged
    seekBar.addEventListener("mousedown", function() {
        myVideo.pause();
    });
    // Play the video when the seek handle is dropped
    seekBar.addEventListener("mouseup", function() {
        myVideo.play();
    });
   
 
myVideo.addEventListener('play', videoPausePlayHandler, false);
myVideo.addEventListener('pause', videoPausePlayHandler, false);
   
}
 
function videoPausePlayHandler(e) {
   if(e.type == 'play') {
      playButton.innerHTML = "pause";
   } else if (e.type == 'pause') {
      playButton.innerHTML = "play";
   }
}
 
function volume_up() {
   var vol = myVideo.volume + 0.01;
   myVideo.volume = Math.min(vol, 1);
   if(volumeMouse) {
      mouseTimer = setTimeout(volume_up, 50);
   }
}
 
function volume_down() {
   var vol = myVideo.volume - 0.01;
   myVideo.volume = Math.max(0, vol);
   if(volumeMouse) {
      mouseTimer = setTimeout(volume_down, 50);
   }
}
 
function setVolume() {
   if(volumeMouse) {
      myVideo.volume = volumeBar.value / 100;
   }
}
 
//change image on play/pause button
function vidplay() {
 
    if (myVideo.paused) {
     myVideo.play();
     //button.textContent = "Pause";
     playButton.innerHTML = "pause";
    } else {
     myVideo.pause();
     //button.textContent = "Play";
     playButton.innerHTML = "play";
    }
}
 
function vidmute() {
    if (myVideo.muted) {
     myVideo.muted = false;
     //button.textContent = "Mute";
     muteButton.innerHTML = "mute";
    } else {
     myVideo.muted=true;
     //button.textContent = "Un-Mute";
     muteButton.innerHTML = "unmute";
    }
  }
 
</script>
</head>
 
<body>
<video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  <source src="Gir.mp4" type="video/mp4">
</video>
<br /><br />
<button onmousedown="volumeMouse=true; volume_up();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Up</button>
<button onmousedown="volumeMouse=true; volume_down();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Down</button>
<br /><br />
<input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false; " />
<output for="volume-bar" id="volume-numbers">100</output>
 
<input id="seek-bar" type="range" min="0" max="100" value="0" step="1">
<output for="seek-bar" id="seek-numbers">100</output>
 
<button id="play" onclick="vidplay()">play</button>
<button id="mute" onclick="vidmute()">mute</button>
</body>
</html>
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7.  
  8. var myVideo, volumeBar, volumeNumbers, volumeMouse = false, mouseTimer, seekBar, seekNumbers, playButton, muteButton;
  9. window.onload = function() {
  10.    
  11.    myVideo = document.getElementById("mdabdvid");
  12.    seekBar = document.getElementById("seek-bar");
  13.    seekNumbers = document.getElementById("seek-numbers");
  14.    volumeBar = document.getElementById("volume-bar");
  15.    volumeNumbers = document.getElementById("volume-numbers");
  16.    playButton = document.getElementById("play");
  17.    muteButton = document.getElementById("mute");
  18.    
  19.    myVideo.addEventListener("volumechange", function() {
  20.       volumeBar.value = myVideo.volume * 100;
  21.       volumeNumbers.innerHTML = Math.round(myVideo.volume * 100) + '%';
  22.       if(myVideo.muted) {
  23.          muteButton.innerHTML = "unmute";
  24.       } else {
  25.          muteButton.innerHTML = "mute";  
  26.       }
  27.    });
  28.    
  29.    seekBar.addEventListener("change", function() {
  30.         // Calculate the new time
  31.         var time = myVideo.duration * (seekBar.value / 100);
  32.  
  33.     // Update the video time
  34.         myVideo.currentTime = time;
  35.     });
  36.    
  37. // Update the seek bar as the video plays
  38.     myVideo.addEventListener("timeupdate", function() {
  39.         // Calculate the slider value
  40.         var value = (100 / myVideo.duration) * myVideo.currentTime;
  41.         // Update the slider value
  42.         seekBar.value = value;
  43.       seekNumbers.innerHTML = Math.round(value) + '%';
  44.     });
  45.     // Pause the video when the seek handle is being dragged
  46.     seekBar.addEventListener("mousedown", function() {
  47.         myVideo.pause();
  48.     });
  49.     // Play the video when the seek handle is dropped
  50.     seekBar.addEventListener("mouseup", function() {
  51.         myVideo.play();
  52.     });
  53.    
  54.  
  55. myVideo.addEventListener('play', videoPausePlayHandler, false);
  56. myVideo.addEventListener('pause', videoPausePlayHandler, false);
  57.    
  58. }
  59.  
  60. function videoPausePlayHandler(e) {
  61.    if(e.type == 'play') {
  62.       playButton.innerHTML = "pause";
  63.    } else if (e.type == 'pause') {
  64.       playButton.innerHTML = "play";
  65.    }
  66. }
  67.  
  68. function volume_up() {
  69.    var vol = myVideo.volume + 0.01;
  70.    myVideo.volume = Math.min(vol, 1);
  71.    if(volumeMouse) {
  72.       mouseTimer = setTimeout(volume_up, 50);
  73.    }
  74. }
  75.  
  76. function volume_down() {
  77.    var vol = myVideo.volume - 0.01;
  78.    myVideo.volume = Math.max(0, vol);
  79.    if(volumeMouse) {
  80.       mouseTimer = setTimeout(volume_down, 50);
  81.    }
  82. }
  83.  
  84. function setVolume() {
  85.    if(volumeMouse) {
  86.       myVideo.volume = volumeBar.value / 100;
  87.    }
  88. }
  89.  
  90. //change image on play/pause button
  91. function vidplay() {
  92.  
  93.     if (myVideo.paused) {
  94.      myVideo.play();
  95.      //button.textContent = "Pause";
  96.      playButton.innerHTML = "pause";
  97.     } else {
  98.      myVideo.pause();
  99.      //button.textContent = "Play";
  100.      playButton.innerHTML = "play";
  101.     }
  102. }
  103.  
  104. function vidmute() {
  105.     if (myVideo.muted) {
  106.      myVideo.muted = false;
  107.      //button.textContent = "Mute";
  108.      muteButton.innerHTML = "mute";
  109.     } else {
  110.      myVideo.muted=true;
  111.      //button.textContent = "Un-Mute";
  112.      muteButton.innerHTML = "unmute";
  113.     }
  114.   }
  115.  
  116. </script>
  117. </head>
  118.  
  119. <body>
  120. <video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  121.   <source src="Gir.mp4" type="video/mp4">
  122. </video>
  123. <br /><br />
  124. <button onmousedown="volumeMouse=true; volume_up();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Up</button>
  125. <button onmousedown="volumeMouse=true; volume_down();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Down</button>
  126. <br /><br />
  127. <input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false; " />
  128. <output for="volume-bar" id="volume-numbers">100</output>
  129.  
  130. <input id="seek-bar" type="range" min="0" max="100" value="0" step="1">
  131. <output for="seek-bar" id="seek-numbers">100</output>
  132.  
  133. <button id="play" onclick="vidplay()">play</button>
  134. <button id="mute" onclick="vidmute()">mute</button>
  135. </body>
  136. </html>
  137.  
  138.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 72 days ago

The code i provided you was only the parts you needed. The code in the onload goes in your onload function with all your other code the buttons are used are the same names your using the only thing that you need to change is the volume change event listener to watch for the mute
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • Loc: Canada

Post 71 days ago

Hi Scott

Thanks for the test code.
It helped me figure things out.

A couple of things I noticed in my code.


If the video is not playing I can click on either the seek bar or the volume bar and slide it along.

If the video is playing, then when I click on the seek bar or volume bar, they pause but I cannot drag it.

If I click on the bars, it does move to the position I clicked.

I can't seem to figure out what I have done differently

Any suggestions

A
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 71 days ago

Post Information

  • Total Posts in this topic: 46 posts
  • Users browsing this forum: No registered users and 60 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.