Question

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

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

Answer 1

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

Answer 2

为此，我将使用HTML progress元素。

如果要让仪表将下载的视频量显示为黑色，这是您要如何设置样式。

progress
  -webkit-appearance: none /* Important, otherwise your styles won't have effect */

progress::-webkit-progress-value
  background: black

Here's a live Codepen demo

Answer 3

我想在搜索栏上显示黑色 代表已下载的视频 。

这是一个最小的示例，该示例通过轮询播放器的buffered属性来将滑块的背景图像设置为线性渐变。 This is the expected result。

请注意，buffered属性可以包含空格。例如，当您将搜索栏从头拖到中间时，浏览器将不会下载中间的部分。您需要迭代buffered属性，并建立一个 islands 列表，并相应地为搜索栏着色。

var player = document.querySelector("video");
var seek_bar = document.querySelector("input[type='range']");

player.addEventListener("loadedmetadata", function() {
  seek_bar.max = Math.floor(this.duration);
});
player.addEventListener("timeupdate", function() {
  seek_bar.value = Math.floor(this.currentTime);
});
player.addEventListener("progress", function() {
  var duration = this.duration, buffered = this.buffered, i, p1, p2, css = [];
  if (duration === 0) {
    return;
  }
  for (i = 0; i < buffered.length; i++) {
    p1 = Math.floor(buffered.start(i) / duration * 100) + "%";
    p2 = Math.floor(buffered.end(i) / duration * 100) + "%";
    // plot the start and stop point of each buffered range
    css.push("transparent " + p1);
    css.push("red " + p1);
    css.push("red " + p2);
    css.push("transparent " + p2);
  }
  seek_bar.style.backgroundImage = "linear-gradient(to right," + css.join(",") + ")";
});

video {
  width: 50%;
}
input[type="range"] {
  width: 50%;
  height: 10px;
  border: 1px solid rgb(15, 15, 15);
  border-radius: 5px;
  -webkit-appearance: none !important;
}
input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(15, 15, 15);
  cursor: pointer;
  -webkit-appearance: none !important;
}

<video src="https://dash.akamaized.net/akamai/bbb/bbb_1920x1080_60fps_12000k.mp4" controls></video>
<input type="range" min="0" value="0">

这是一个比较简单的搜索栏，类似于YouTube上使用的搜索栏。 This is the expected result。

var player = document.querySelector("video");
var seek_bar = document.querySelector("input[type='range']");

player.addEventListener("loadedmetadata", function() {
  seek_bar.max = Math.floor(this.duration);
});
player.addEventListener("timeupdate", function() {
  seek_bar.value = Math.floor(this.currentTime);
});
player.addEventListener("progress", function() {
  var duration = this.duration, buffered = this.buffered, i, p = this.currentTime;
  if (duration === 0) {
    return;
  }
  for (i = 0; i < buffered.length; i++) {
    // find the buffered range that contains current playback time
    if (buffered.start(i) <= p && p <= buffered.end(i)) {
      p = buffered.end(i);
      break;
    }
  }
  seek_bar.style.backgroundImage = "linear-gradient(to right,red " + Math.floor(p / duration * 100) + "%,transparent " + Math.floor(p / duration * 100) + "%)";
});

video {
  width: 50%;
}
input[type="range"] {
  width: 50%;
  height: 10px;
  border: 1px solid rgb(15, 15, 15);
  border-radius: 5px;
  -webkit-appearance: none !important;
}
input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(15, 15, 15);
  cursor: pointer;
  -webkit-appearance: none !important;
}

<video src="https://dash.akamaized.net/akamai/bbb/bbb_1920x1080_60fps_12000k.mp4" controls></video>
<input type="range" min="0" value="0">

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

3 个答案: