1

I’m a total newbiew here, but trying my best to figure this out.

I can specify the video playback speed with a range slider no problem, but after changing the speed on the slider, instead of manually pushing it back to it’s original value I’d like to be able to push a “Reset speed” button and have the slider automatically reset both to it’s original position and original speed value of “1”. I’ve managed to get the slider to reset to it’s starting position but it still retains the altered playback speed value. Below is the code I came up with. Can anyone help me with this? Thank you!

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
 
  var v = document.getElementById("myVideo");
  var p = document.getElementById("pbr");
  var c = document.getElementById("currentPbr");
 
  p.addEventListener('input',function(){
    c.innerHTML = p.value;
    v.playbackRate = p.value;
  },false);

};
</script>

<script>
function myFunction(){
  document.getElementById("myForm").reset();
} 
  
function setPlaySpeednormal(){ 
  vid.playbackRate = 1;
}
</script>

 
<style>

.holder {
   width:640px;
   height:360;
   margin: 0 auto;
   margin-bottom:14em;
}
 
#pbr {
   width:50%;
}

</style>
 
</head>
<body>
 
<div class="holder">
<video id="myVideo" controls>
<source src="https://www.dropbox.com/s/5rjbtmantuow8vw/testvideo_hfd.mp4?raw=1" 
          type='video/mp4'/>
</video>
 
<form id= "myForm">
<input id="pbr" type="range" value="1" 
                    min="0.5" max="1.5" step="0.05" >
 
<p>Playback Rate <span id="currentPbr">1</span></p>
    
<input type="button" value="Reset speed" onclick="myFunction();setPlaySpeednormal();"/>
  
</form>
  
  
</div>


</body>
</html>
jcp543
  • 47
  • 6

1 Answers1

0

In the window.onload function, you've declared a variable with scope of only that function. You can't access it outside when you need it in the setPlaySpeednormal function. So, move the variable v outside:

var v;
window.onload = function () {
 
  v = document.getElementById("myVideo");
  var p = document.getElementById("pbr");
  var c = document.getElementById("currentPbr");
 
  p.addEventListener('input',function(){
    c.innerHTML = p.value;
    v.playbackRate = p.value;
  },false);

};

Also, in your setPlaySpeednormal function, you are using a variable named vid. Even though the variable you are using for video element is named v

function setPlaySpeednormal(){ 
  v.playbackRate = 1; // change vid to v
}
Ghost
  • 735
  • 5
  • 16
  • Thank you so much Ghost! That worked like a charm! The speed and slider position are now both restored to their default value after clicking the button. However I just realized that I still need to figure out how to update the “Playback Rate” text (aka “currentPbr) as it’s still showing the altered speed after clicking the button and I’d like the text to also reset back to “1”. Any suggestions for that? Thanks again! – jcp543 Jun 27 '20 at 04:38
  • Glad to help! And yes I noticed that, to fix that you have to take `var p` out of the window.onload just like you did with `var v`. Then in your `setPlaySpeednormal` function, you have to set it's `innerHTML` like `c.innerHTML = 1`. The problem is that the variables you created inside that function can only be used inside it. Accessing them outside is not possible. – Ghost Jun 27 '20 at 04:42
  • Thanks Ghost! I’m so grateful for your help! I updated it per your suggestions and everything works great now. I even added a button to restart the video. Just one more question if you have time. Can you think of anyway I could condense the Script code more? I did just got rid of the extra – jcp543 Jun 27 '20 at 19:12
  • `` – jcp543 Jun 27 '20 at 19:13
  • No, I don't see anything extra. It should be fine. You could just take the variables into one line like `var p, c, v` – Ghost Jun 27 '20 at 19:22
  • Good suggestion! Thanks again for all of your help! – jcp543 Jun 27 '20 at 20:51
  • No worries! If this solves your quesiton, mark this answer with the checkmark to indicate that the problem has been solved. – Ghost Jun 27 '20 at 21:06