在输入范围的两个部分上应用不同的颜色
Ama*_*man 5 html javascript css html5
我正在尝试为视频创建搜索栏，我想在搜索栏上显示黑色，代表已下载的视频量。如何在搜索栏上分配其他颜色来表示下载的视频量？
我想我没有正确解释我的问题。我想要一种颜色（例如银色）来显示已下载播放的视频数量。搜索栏上的银色可以在默认值html5 video和中找到YouTube video player。（下面提供的图片）
var player = document.querySelector("video"),
seek_bar = document.querySelector("input"),
_console = document.querySelector("div");
player.ontimeupdate = function() {
seek_bar.value = this.currentTime.toString().split(".")[0];
}
player.addEventListener('progress', function() {
try {
_console.innerHTML = "Downloaded Upto: " + this.buffered.end(0).toString().split(".")[0];
} catch(e) {}
});video {
width: 90%;
height: 75%;
}
input[type="range"] {
width: 90%;
height: 10px;
background: rgb(110, 170, 250);
border: 1px solid rgb(15, 15, 15);
border-radius: 50px;
-webkit-appearance: none !important;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: rgb(15, 15, 15);
height: 20px;
width: 20px;
cursor: pointer;
border-radius: 100%;
}<html>
<head>
<title></title>
</head>
<body>
<video src="https://dash.akamaized.net/akamai/bbb/bbb_1920x1080_60fps_12000k.mp4" controls></video>
<input type="range" min="0" value="0" max="634"/>
<div></div>
</body>
</html>SILVER (THE OTHER COLOR) ON THE SEEK_BAR:
为此，我将使用 HTMLprogress元素。
如果您希望显示下载视频量的仪表具有黑色，则可以采用以下样式。
progress
-webkit-appearance: none /* Important, otherwise your styles won't have effect */
progress::-webkit-progress-value
background: black