如何通过单击按钮将 HTML 范围滑块重置为默认位置和默认 playbackRate 值

Question

我在这里完全是个新手，但我正在尽力解决这个问题。

我可以使用范围滑块指定视频播放速度没问题，但在更改滑块上的速度后，我希望能够按下“重置”而不是手动将其推回到原始值speed”按钮，并让滑块自动重置到其原始位置和原始速度值“1”。我已经设法让滑块重置到它的起始位置，但它仍然保留改变后的播放速度值。下面是我想出的代码。谁能帮我这个？谢谢！

<!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>

Answer 1

在 window.onload 函数中，您声明了一个仅具有该函数作用域的变量。在setPlaySpeednormal函数中需要的时候外部是访问不到的。因此，将变量 v 移到外面：

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);

};

此外，在您的 setPlaySpeednormal 函数中，您使用了一个名为 vid 的变量。即使您用于视频元素的变量名为 v

function setPlaySpeednormal(){ 
  v.playbackRate = 1; // change vid to v
}

如何通过单击按钮将 HTML 范围滑块重置为默认位置和默认 playbackRate 值

How to reset an HTML range slider to default position and default playbackRate value with a single button press

javascript

html

playback-rate