Menu
I'm trying to create a seek bar for the video and I want to show black color on the seek bar representing the amount of video which has been downloaded. How can I assign an additional color on the seek bar representing the amount of video downloaded?
I think I didn't explain my question properly. I want a color (e.g. silver) which shows the amount of video which has been downloaded for playing. Silver color on the seek bar can be found in the default html5 video and YouTube video player. (Image provided below)
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:
951
If the general appearance of the slider is fine, but the default blue color (in Chrome) needs to fit a theme color, apply a filter: hue-rotate(); to the input[type="range"] element. Other filters can be used. Some even change the background color of the slider.
1- Color Range SelectionWith the selection radio button active, click around the little preview area or in your image behind the dialog to select the color you want to select. You can then play around with the amount of Fuziness to tweak the range amount of similar colors that should become selected.
To style the range input with CSS you'll need to apply styles to two pseudo-elements: ::-webkit-slider-thumb and ::-webkit-slider-runnable-track . Find out how you can apply custom styling and make the range input more functional and appealing. Contents of the article: CSS selectors for the range input.
This is how I would do it: I would create a new <style> element and I woild append this element to the head. Next on input I would write a css rule that would change the thumb's color from red to green using hsl colors. I would make this css rule the text content of the new style element.
Here is an example of something similar I did a couple of years ago: 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
