调整范围滑块时如何防止html按钮来回移动
当我调整此范围滑块时，右侧指示视频播放速率的相应文本从一位数（即 1）变为多位数（即 0.95）。每次我这样做时，它都会导致文本右侧的按钮来回移动。我想知道如何防止这种运动发生？我尝试在文本和按钮之间添加一些空格、填充、边距等，但我似乎无法让它停止。我绝对希望将所有对象保持在同一条线上。有没有办法让默认位数保持不变？例如，当它设置为 1 时，是否可以改为 1.00，而当它设置为 0.8 时，是否可以改为 0.80？我不确定这是否可行，因为播放率属性似乎需要特定位数。
<!DOCTYPE html>
<html>
<head>
<style>
div#videoPlayerBox{ width:550px; background:#000; margin:0px auto;}
div#videoControlsBar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#pbr{ width:40%;}
div#PlaybackRateBox{ margin:left; width:28%; text-align:center; border: solid 3px #000; background:#FFF; padding:0px;}
</style>
<script>
var v,p,c;
function myFunction(){document.getElementById("myForm").reset();}
function setPlaySpeednormal(){ c.innerHTML = 1;v.playbackRate = 1;}
function restartVideo(){v.pause();v.currentTime = 0;v.play();}
window.onload = function() {
v = document.getElementById("myVideo");
p = document.getElementById("pbr");
c = document.getElementById("currentPbr");
p.addEventListener('input',function(){
c.innerHTML = p.value;
v.playbackRate = p.value;
},false);
};
</script>
</head>
<body>
<div id="videoPlayerBox">
<video id="myVideo" width="100%" poster="https://www.dropbox.com/s/8qbvpxvtedcs5lq/2016-07-30_Milonga%20Triste_Guillermo%20Garcia_Tango%20Atipico_San%20Francisco.jpg?raw=1" controls>
<source src="https://www.dropbox.com/s/5rjbtmantuow8vw/testvideo_hfd.mp4?raw=1"
type='video/mp4'/>
Your browser does not support HTML video.
</video>
<div id="videoControlsBar">
<form id= "myForm">
<input id="pbr" type="range" value="1" min="0.5" max="1.2" step="0.05" class="slider">
<span>Speed <span id="currentPbr">1</span>
<input type="button" value="Reset" onclick="myFunction();setPlaySpeednormal();">
<input type="button" value="Restart" onclick="restartVideo();">
</form>
</div>
</div>
</body>
</html>
慕桂英5465372回答
-
慕尼黑5688855
尝试将此#currentPbr行添加到您的样式块中，如下所示（最后一行）。根据自己的喜好调整宽度<style>div#videoPlayerBox{ width:550px; background:#000; margin:0px auto;}div#videoControlsBar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}#pbr{ width:40%;}div#PlaybackRateBox{ margin:left; width:28%; text-align:center; border: solid 3px #000; background:#FFF; padding:0px;}#currentPbr {display: inline-block; min-width: 80px;}</style> -
慕森卡
这是一个可能对您有所帮助的功能： parseNum = (num) => (num == 1 || num === 0) ? num + '.00' : (String(num).length == 3 ? num + '0' : num)所以，现在你可以在给 c.innerHTML 赋值之前调用这个函数。因此，代替c.innerHTML = p.value，您可以执行以下操作：var v,p,c;function myFunction(){document.getElementById("myForm").reset();} function setPlaySpeednormal(){ c.innerHTML = 1;v.playbackRate = 1;}function restartVideo(){v.pause();v.currentTime = 0;v.play();}const parseNum = (num) => (num == 1 || num === 0) ? num + '.00' : (String(num).length == 3 ? num + '0' : num)window.onload = function() { v = document.getElementById("myVideo"); p = document.getElementById("pbr"); c = document.getElementById("currentPbr"); p.addEventListener('input',function(){ c.innerHTML = parseNum(p.value); v.playbackRate = p.value; },false);};这是该功能的屏幕截图：PS请务必不要对每个数字都使用此功能。它仅适用于卷的域。
随时随地看视频慕课网APP
相关分类
JavaScript