时间戳

首页 > 解决方案 > 在输入范围的两个部分应用不同的颜色

javascript - 在输入范围的两个部分应用不同的颜色

问题描述

我正在尝试为视频创建一个搜索栏，我想在搜索栏上显示黑色，代表已下载的视频数量。如何在搜索栏上分配一个额外的颜色来表示下载的视频量？

我想我没有正确解释我的问题。我想要一种颜色（例如银色）来显示已下载播放的视频量。搜索栏上的银色可以在默认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:

标签： javascriptcsshtml

解决方案

这是我几年前做过的类似事情的一个例子： 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>

推荐阅读