Я хочу показать черный цвет на панели поиска , представляющий количество видео, которое было загружено .
Вотминимальный пример, который устанавливает фоновое изображение слайдера в линейный градиент путем опроса свойства buffered игрока. Это ожидаемый результат .
Обратите внимание, что свойство buffered может содержать пробелы.Например, когда вы перетаскиваете панель поиска из начала в середину, браузер не загружает промежуточную часть.Вам нужно перебрать свойство buffered и создать список из островов и соответствующим образом раскрасить строку поиска.
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. Это ожидаемый результат .
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">