我正在尝试为视频创建搜索栏,我想在搜索栏上显示黑色,代表已下载的视频量。如何在搜索栏上分配其他颜色来表示下载的视频量?
我想我没有正确解释我的问题。我想要一种颜色(例如银色),该颜色可以显示已下载用于播放的视频数量。查找栏上的银色可以在默认的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:
最佳答案
这是几年前我做过的类似事情的一个例子:
https://jsfiddle.net/remisture/esyvws3d/
$(window).on("load resize", function() {
// Get the current width of the slider
var sliderWidth = $('[type=range]').width();
// Remove previously created style elements
$('.custom-style-element-related-to-range').remove();
// Add our updated styling
$('<style class="custom-style-element-related-to-range">input[type="range"]::-webkit-slider-thumb { box-shadow: -' + sliderWidth + 'px 0 0 ' + sliderWidth + 'px;}<style/>').appendTo('head');
});
.container {
margin: 0 auto;
width: 500px;
}
input[type='range'] {
width: 100%;
}
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
overflow: hidden;
-webkit-appearance: none;
background-color: #9a905d;
}
input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #13bba4;
margin-top: -1px;
}
input[type='range']::-webkit-slider-thumb {
width: 10px;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
background: #434343;
color: #43e5f7;
}
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #43e5f7;
}
input[type="range"]::-moz-range-track {
background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
background-color: #9a905d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<input type="range">
</div>