1

我是这里的新手，但尽我所能解决这个问题。

我可以使用范围滑块指定视频播放速度没问题，但是在更改滑块上的速度后，而不是手动将其推回原始值，我希望能够按下“重置速度”按钮并拥有滑块自动复位到它的原始位置和原始速度值“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>
4

1 回答 1

0

在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
}
于 2020-06-26T02:36:31.677 回答