HTML5 Video Duration

  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 322
  • 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: 322
  • 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: 477

Post 3+ Months Ago

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

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: 322
  • 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: 322
  • 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: 477

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: 322
  • Loc: Canada

Post 3+ Months Ago

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

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: 477

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: 322
  • 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: 477

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: 322
  • 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: 477

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: 322
  • Loc: Canada

Post 3+ Months Ago

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

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 99 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.