我对 Firefox 中的 HTML 视频播放器进度条样式有疑问。 Safari 和 Chrome 还好,但 Firefox 就完全不同了。应该没有“气泡”,只有进度条边框的颜色正确。谁知道如何去除气泡并填充条形背景?
火狐:
Chrome :
Safari :
HTML:
<div id="progress">
<input type="range" id="seek-bar" min="0" max="100" value="0" class="range" />
</div>
CSS:
.range {
-webkit-appearance: none;
background: linear-gradient(to right,
#444 0, #444 100%);
cursor: pointer;
height: 3px;
margin: 0;
transitionx: 0.1s ease-in;
vertical-align: bottom;
width: 100%;
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
}
#video-controls:hover .range::-webkit-slider-thumb {
width: 20px;
height: 20px;
}
JS:
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function () {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
updateText(video.currentTime);
$current.text((new Date(null, null, null, null, null, video.currentTime).toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0]).substr(3)); //Update current time MM:ss
var $seekBar = $("#seek-bar");
var val = $seekBar.val(); // Current video position
var buf = (video.buffered.end(0) / video.duration) * 100; // Calculates buffered %
$seekBar.css('background', 'linear-gradient(to right, #ff9900 0%, #ff9900 ' + val + '%, #777 ' + val + '%, #777 ' + buf + '%, #444 ' + buf + '%, #444 100%)');
});
最佳答案
这里有一些用于 Firefox 范围输入伪元素的样式,它们应该可以让您更改拇指(气泡)和轨道的默认值:
.range{
padding:0;
background: linear-gradient(to right, #444 0, #444 100%);
}
.range::-moz-range-track {
background: linear-gradient(to right, #444 0, #444 100%);
border: none;
}
.range::-moz-range-thumb {
background: rgba(0,0,0,0); /*hide the 'bubble'*/
}
.range::-moz-focusring{ /*hide the outline behind the border*/
outline: none;
}
关于javascript - Firefox 进度条样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42351533/