当我调整此范围滑块时，右侧指示视频播放速率的相应文本从一位数（即 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>
2 回答
慕尼黑5688855
TA贡献1848条经验 获得超2个赞
尝试将此#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>
慕森卡
TA贡献1806条经验 获得超8个赞
这是一个可能对您有所帮助的功能： 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请务必不要对每个数字都使用此功能。它仅适用于卷的域。
添加回答
举报
0/150
提交
取消