當我調整此范圍滑塊時，右側指示視頻播放速率的相應文本從一位數（即 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>
調整范圍滑塊時如何防止html按鈕來回移動
慕桂英546537
2022-10-21 15:43:06
