HTML5 Video Duration

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

Post 3+ Months 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
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months 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: 284

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months 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: 483

Post 3+ Months 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: 483

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months 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: 483

Post 3+ Months Ago

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

Post 3+ Months 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: 483

Post 3+ Months 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: 483

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months Ago

Worked perfectly

thanks
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months 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: 483

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months Ago

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

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

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months 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: 483

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months Ago

The only one that worked was 1)

I am curious why this happened

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

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months 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: 483

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months Ago

Worked like a charm

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

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months 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: 483

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months 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: 483

Post 3+ Months 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: 483

Post 3+ Months 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: 373
  • Loc: Canada

Post 3+ Months 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
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

Gave wrong description for seek bar
I cannot move the seek bar whether the video is playing or not.
I can only click on the bar to move it
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

I found the problem

Error was so stupid that I can't mention it to keep face
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

lol ok glad you figured it out
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

So this may or may not affect you but one of the issues I was having, for well until about 5 minutes ago was having custom controls sitting on top of the video on Ipads and possibly Iphones, I don't have an i phone and am borrowing an ipad for testing.

So the issue goes like this the video player eats up ALL click events not setup for the video unless you bind/unbind the controls it took me a bit to figure out but this is something that you may run into.

Here is what I did to fix this issue

video element
HTML Code: [ Select ]
<video id="myVideo">
  <source src="Gir.mp4" type="video/mp4">
</video>
 
  1. <video id="myVideo">
  2.   <source src="Gir.mp4" type="video/mp4">
  3. </video>
  4.  


jQuery Fix
JAVASCRIPT Code: [ Select ]
 
// This function needs to be called periodically for the controls on ipads to work.
function redraw(video) {
    video.attr('controls', 'controls');
    video.removeAttr('controls');    
}
 
// This function controls each embedded video in the page base of their span container
function init_use_embed(element) {
 
    var video = jQuery("#myVideo");
 
    /* [... Code cut out show the solution to the issue ...] */  
   
    // This function gets called at the end of the function that sets up each player
    // This could be the onload function if one is used. The variable video is a jQuery
    // object for the <video tag>
    redraw(video);
   
}
 
  1.  
  2. // This function needs to be called periodically for the controls on ipads to work.
  3. function redraw(video) {
  4.     video.attr('controls', 'controls');
  5.     video.removeAttr('controls');    
  6. }
  7.  
  8. // This function controls each embedded video in the page base of their span container
  9. function init_use_embed(element) {
  10.  
  11.     var video = jQuery("#myVideo");
  12.  
  13.     /* [... Code cut out show the solution to the issue ...] */  
  14.    
  15.     // This function gets called at the end of the function that sets up each player
  16.     // This could be the onload function if one is used. The variable video is a jQuery
  17.     // object for the <video tag>
  18.     redraw(video);
  19.    
  20. }
  21.  


In your case it would have to be different there may be other places that this function needs to be called but i'm not sure at this point

Pure UNTESTED javascript
JAVASCRIPT Code: [ Select ]
 
 
// This function needs to be called periodically for the controls on ipads to work.
function redraw(video) {
    video.setAttribute('controls', 'controls');
    video.removeAttribute('controls');    
}
 
window.onload = function() {
 
    var video = document.getElementById("myVideo");
   
    /* [... Code cut out show the solution to the issue ...] */
   
    redraw(video)
}
 
 
  1.  
  2.  
  3. // This function needs to be called periodically for the controls on ipads to work.
  4. function redraw(video) {
  5.     video.setAttribute('controls', 'controls');
  6.     video.removeAttribute('controls');    
  7. }
  8.  
  9. window.onload = function() {
  10.  
  11.     var video = document.getElementById("myVideo");
  12.    
  13.     /* [... Code cut out show the solution to the issue ...] */
  14.    
  15.     redraw(video)
  16. }
  17.  
  18.  
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

Is it possible to use left and right arrow keys on keyboard to control seek bar and volume bar

I assume you would have to click on the bar in question and then use the arrow keys.

I clicked on the seek bar and then used the arrow keys and it worked. I was able to move seek bar left and right and video followed.

I did the same for the volume bar but it only moved the bar and did not affect the volume level
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

I would really like to use the arrow keys to control the video seek bar.

Is this possible?

I would really appreciate some suggestions.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

Bind the arrow key press to a seek function. I'm not in a place where I can work out the logic but it would involve an event listener
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

Do you mean adding an event listener for the keys
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

essentially yes

It can be don't something like this
JAVASCRIPT Code: [ Select ]
document.onkeydown = function() {
    switch (window.event.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            alert('up');
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};
 
 
  1. document.onkeydown = function() {
  2.     switch (window.event.keyCode) {
  3.         case 37:
  4.             alert('left');
  5.             break;
  6.         case 38:
  7.             alert('up');
  8.             break;
  9.         case 39:
  10.             alert('right');
  11.             break;
  12.         case 40:
  13.             alert('down');
  14.             break;
  15.     }
  16. };
  17.  
  18.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

So i did some tests and is the test code up and down control the volume and left and right the seek position
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 bind_keys() {
   
     
}
document.onkeydown = function(event) {
   event = event || window.event;
    switch (event.keyCode) {
        case 37:
      myVideo.pause();
            seekBar.value--;
            break;
        case 38:
            volume_up();
            break;
        case 39:
      myVideo.pause();
            seekBar.value++;
            break;
        case 40:
            volume_down();
            break;
    }
};
 
document.onkeyup = function(event) {
   
   switch (event.keyCode) {
        case 37:
        case 38:
        case 39:
        case 40:
         // Calculate the new time
         var time = myVideo.duration * (seekBar.value / 100);
     
         // Update the video time
         myVideo.currentTime = time;
         myVideo.play();
            break;
    }
}
   
function videoPausePlayHandler(e) {
   if(e.type == 'play') {
      playButton.innerHTML = "pause";
   } else if (e.type == 'pause') {
      playButton.innerHTML = "play";
   }
   bind_keys();
}
 
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 bind_keys() {
  61.    
  62.      
  63. }
  64. document.onkeydown = function(event) {
  65.    event = event || window.event;
  66.     switch (event.keyCode) {
  67.         case 37:
  68.       myVideo.pause();
  69.             seekBar.value--;
  70.             break;
  71.         case 38:
  72.             volume_up();
  73.             break;
  74.         case 39:
  75.       myVideo.pause();
  76.             seekBar.value++;
  77.             break;
  78.         case 40:
  79.             volume_down();
  80.             break;
  81.     }
  82. };
  83.  
  84. document.onkeyup = function(event) {
  85.    
  86.    switch (event.keyCode) {
  87.         case 37:
  88.         case 38:
  89.         case 39:
  90.         case 40:
  91.          // Calculate the new time
  92.          var time = myVideo.duration * (seekBar.value / 100);
  93.      
  94.          // Update the video time
  95.          myVideo.currentTime = time;
  96.          myVideo.play();
  97.             break;
  98.     }
  99. }
  100.    
  101. function videoPausePlayHandler(e) {
  102.    if(e.type == 'play') {
  103.       playButton.innerHTML = "pause";
  104.    } else if (e.type == 'pause') {
  105.       playButton.innerHTML = "play";
  106.    }
  107.    bind_keys();
  108. }
  109.  
  110. function volume_up() {
  111.    var vol = myVideo.volume + 0.01;
  112.    myVideo.volume = Math.min(vol, 1);
  113.    if(volumeMouse) {
  114.       mouseTimer = setTimeout(volume_up, 50);
  115.    }
  116. }
  117.  
  118. function volume_down() {
  119.    var vol = myVideo.volume - 0.01;
  120.    myVideo.volume = Math.max(0, vol);
  121.    if(volumeMouse) {
  122.       mouseTimer = setTimeout(volume_down, 50);
  123.    }
  124. }
  125.  
  126. function setVolume() {
  127.    if(volumeMouse) {
  128.       myVideo.volume = volumeBar.value / 100;
  129.    }
  130. }
  131.  
  132. //change image on play/pause button
  133. function vidplay() {
  134.  
  135.     if (myVideo.paused) {
  136.      myVideo.play();
  137.      //button.textContent = "Pause";
  138.      playButton.innerHTML = "pause";
  139.     } else {
  140.      myVideo.pause();
  141.      //button.textContent = "Play";
  142.      playButton.innerHTML = "play";
  143.     }
  144. }
  145.  
  146. function vidmute() {
  147.     if (myVideo.muted) {
  148.      myVideo.muted = false;
  149.      //button.textContent = "Mute";
  150.      muteButton.innerHTML = "mute";
  151.     } else {
  152.      myVideo.muted=true;
  153.      //button.textContent = "Un-Mute";
  154.      muteButton.innerHTML = "unmute";
  155.     }
  156.   }
  157.  
  158. </script>
  159. </head>
  160.  
  161. <body>
  162. <video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  163.   <source src="Gir.mp4" type="video/mp4">
  164. </video>
  165. <br /><br />
  166. <button onmousedown="volumeMouse=true; volume_up();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Up</button>
  167. <button onmousedown="volumeMouse=true; volume_down();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Down</button>
  168. <br /><br />
  169. <input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false; " />
  170. <output for="volume-bar" id="volume-numbers">100</output>
  171.  
  172. <input id="seek-bar" type="range" min="0" max="100" value="0" step="1">
  173. <output for="seek-bar" id="seek-numbers">100</output>
  174.  
  175. <button id="play" onclick="vidplay()">play</button>
  176. <button id="mute" onclick="vidmute()">mute</button>
  177. </body>
  178. </html>
  179.  
  180.  
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

Tried out your changes and have a few comments.

When the video is first loaded:

If I use the Up and Down arrow, I can see the volume bar change and the % value also change

If I use the left and right arrow, I can see the seek bar change but not the % or video frame until I release the key.

If I click on the video seek bar then use the left and right arrow keys I can then see the % and video frame change as the slider moves.

If I also use the Up and Down Arrow keys right after, not only does the volume bar change, but the video seek bar also changes at the same time and you can see the video frames changes.

If I hit the pause button, it seems to bring the video seek bar back to to the situtation it was in before I clicked on it with the mouse.

Any comments
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

Yes everything that you are using in this player (video container, slider bars) have their own priorities with the arrow keys which take effect when you focus on the element.

If you click on the web page everything should work as normal clicking on the video will activate the video players arrow key functions(left/right seek about 10%) clicking on either slider will again activate the sliders arrow keys

The only thing i could think of is to blur the active element on key down but this could cause unforeseen glitches

Here is that code as well as the fix for the % issue
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);
 
}
 
document.onkeydown = function(event) {
   
   event = event || window.event;
   
   if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
      document.activeElement.blur();
   }
   
    switch (event.keyCode) {
        case 37:
         myVideo.pause();
            seekBar.value--;
            break;
        case 38:
            volume_up();
            break;
        case 39:
         myVideo.pause();
            seekBar.value++;
            break;
        case 40:
            volume_down();
            break;
    }
   
   if(event.keyCode == 37 || event.keyCode == 39) {
      // Calculate the new time
      var time = myVideo.duration * (seekBar.value / 100);
 
      // Update the video time
      myVideo.currentTime = time;
   }
};
 
document.onkeyup = function(event) {
   
   switch (event.keyCode) {
        case 37:
        case 38:
        case 39:
        case 40:
         myVideo.play();
            break;
    }
}
   
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. document.onkeydown = function(event) {
  61.    
  62.    event = event || window.event;
  63.    
  64.    if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
  65.       document.activeElement.blur();
  66.    }
  67.    
  68.     switch (event.keyCode) {
  69.         case 37:
  70.          myVideo.pause();
  71.             seekBar.value--;
  72.             break;
  73.         case 38:
  74.             volume_up();
  75.             break;
  76.         case 39:
  77.          myVideo.pause();
  78.             seekBar.value++;
  79.             break;
  80.         case 40:
  81.             volume_down();
  82.             break;
  83.     }
  84.    
  85.    if(event.keyCode == 37 || event.keyCode == 39) {
  86.       // Calculate the new time
  87.       var time = myVideo.duration * (seekBar.value / 100);
  88.  
  89.       // Update the video time
  90.       myVideo.currentTime = time;
  91.    }
  92. };
  93.  
  94. document.onkeyup = function(event) {
  95.    
  96.    switch (event.keyCode) {
  97.         case 37:
  98.         case 38:
  99.         case 39:
  100.         case 40:
  101.          myVideo.play();
  102.             break;
  103.     }
  104. }
  105.    
  106. function videoPausePlayHandler(e) {
  107.    if(e.type == 'play') {
  108.       playButton.innerHTML = "pause";
  109.    } else if (e.type == 'pause') {
  110.       playButton.innerHTML = "play";
  111.    }
  112. }
  113.  
  114. function volume_up() {
  115.    var vol = myVideo.volume + 0.01;
  116.    myVideo.volume = Math.min(vol, 1);
  117.    if(volumeMouse) {
  118.       mouseTimer = setTimeout(volume_up, 50);
  119.    }
  120. }
  121.  
  122. function volume_down() {
  123.    var vol = myVideo.volume - 0.01;
  124.    myVideo.volume = Math.max(0, vol);
  125.    if(volumeMouse) {
  126.       mouseTimer = setTimeout(volume_down, 50);
  127.    }
  128. }
  129.  
  130. function setVolume() {
  131.    if(volumeMouse) {
  132.       myVideo.volume = volumeBar.value / 100;
  133.    }
  134. }
  135.  
  136. //change image on play/pause button
  137. function vidplay() {
  138.  
  139.     if (myVideo.paused) {
  140.      myVideo.play();
  141.      //button.textContent = "Pause";
  142.      playButton.innerHTML = "pause";
  143.     } else {
  144.      myVideo.pause();
  145.      //button.textContent = "Play";
  146.      playButton.innerHTML = "play";
  147.     }
  148. }
  149.  
  150. function vidmute() {
  151.     if (myVideo.muted) {
  152.      myVideo.muted = false;
  153.      //button.textContent = "Mute";
  154.      muteButton.innerHTML = "mute";
  155.     } else {
  156.      myVideo.muted=true;
  157.      //button.textContent = "Un-Mute";
  158.      muteButton.innerHTML = "unmute";
  159.     }
  160.   }
  161.  
  162. </script>
  163. </head>
  164.  
  165. <body>
  166. <video id="mdabdvid" width="520" poster="postermdabd.gif" controls>
  167.   <source src="Gir.mp4" type="video/mp4">
  168. </video>
  169. <br /><br />
  170. <button onmousedown="volumeMouse=true; volume_up();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Up</button>
  171. <button onmousedown="volumeMouse=true; volume_down();" onmouseup="volumeMouse=false; clearTimeout(mouseTimer);">Volume Down</button>
  172. <br /><br />
  173. <input type="range" id="volume-bar" min="0" max="100" value="100" onmousemove="setVolume()" onmousedown="volumeMouse=true;" onmouseup="volumeMouse=false; " />
  174. <output for="volume-bar" id="volume-numbers">100</output>
  175.  
  176. <input id="seek-bar" type="range" min="0" max="100" value="0" step="1">
  177. <output for="seek-bar" id="seek-numbers">100</output>
  178.  
  179. <button id="play" onclick="vidplay()">play</button>
  180. <button id="mute" onclick="vidmute()">mute</button>
  181. </body>
  182. </html>
  183.  
  184.  
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

Could you please elaborate on blur causing unforeseen glitches.
I am not familiar with blur
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

Blur is the event that happens when the an element looses focus. think of forms if you tab from one element to another the one that you tabbed from is not longer focused on. if you fill out a basic form and click the body of the document out side the form element the form no longer has focus so hitting enter will not submit it.

When you programmatically blur you move the focus from the element to the body of the page. In the code i provided no matter when you press the arrow keys the focus will switch to the body.

one of these glitches is easy to demonstrate add a textarea to the page type in it and try to move your cursor with the arrow keys

Now you could check what item is in focus and only blur if it is the sliders or video player. using the example above you will be able to move around the textarea but it will also be controlling the video.

Odd behaviors like this are why I tend to not code in short cut keys
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 373
  • Loc: Canada

Post 3+ Months Ago

how would I blur the sliders and video player
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 483

Post 3+ Months Ago

Replace

JAVASCRIPT Code: [ Select ]
if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
    document.activeElement.blur();
}
 
  1. if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
  2.     document.activeElement.blur();
  3. }
  4.  


With

JAVASCRIPT Code: [ Select ]
if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
    var focused = document.activeElement.id;
     
    if(focused == 'mdabdvid' || focused == 'volume-bar' || focused == 'seek-bar') {
        document.activeElement.blur();
    }
     
}
 
  1. if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
  2.     var focused = document.activeElement.id;
  3.      
  4.     if(focused == 'mdabdvid' || focused == 'volume-bar' || focused == 'seek-bar') {
  5.         document.activeElement.blur();
  6.     }
  7.      
  8. }
  9.  

Post Information

  • Total Posts in this topic: 46 posts
  • Users browsing this forum: No registered users and 35 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
 
 

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