Эта статья не подходит для решения, т к свойство video.buffered() показывает отрывки, которые были предзагружены, а не те, что пользователь проиграл. А предзагрузка (буферизация) всегда происходит с небольшим запасом.
Плюс ещё отрывки таким образом создаются даже если не воспроизводить, а только ставить курсор в определённое место или перемещать ползунок. Ещё они могут неожиданно между собой объединяться. Так что вот какой ряд недостатков.
По настоящему создать массив из проигранных отрывков можно следующим кодом:
<video id=video width=300 src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" controls></video><br /><br />
<canvas id=canvas height=50 style="border-style: solid"></canvas><br /><br />
<script>
canvas.width = 300; // ширина прогрессбара
let ctx = canvas.getContext("2d");
video.ontimeupdate = () => {
ctx.fillStyle = "green";
ctx.fillRect(drawing(video.currentTime), 0, 1, 25);
}
let array = [];
video.onplay = () => start = video.currentTime;
video.onpause = () => {
end = video.currentTime;
console.log("start = " + start.toFixed(2) + "; end = " + end.toFixed(2));
ctx.fillStyle = "red";
ctx.fillRect(drawing(start), 25, drawing(end - start), 25);
array.push([start, end]);
}
function drawing(e){return e / video.duration * canvas.width};
</script>
Верхняя полоса на канвасе отображает проигранные фрагменты файла в реальном времени, нижняя отображает добавляемые в массив отрывки в момент нажатия на паузу и не реагирует на перемещение ползунка без воспроизведения. Работает одинаково с тегами аудио и видео.
После прочтения мной упомянутой документации buffered() у меня в голове не укладывается, сколько ошибок там сделано. В первом примере после каждого срабатывания seek (выбор места воспроизведения на плеере) циклом выводятся все накопленные до этого отрывки, включая последний. (даже страница от этого виснет) Вместо того, чтобы столько раз перерисовывать одно и то же, достаточно выводить на канвас только последний отрезок:
window.onload = function(){
var myAudio = document.getElementById('my-audio');
var myCanvas = document.getElementById('my-canvas');
var context = myCanvas.getContext('2d');
context.fillStyle = 'lightgray';
context.fillRect(0, 0, myCanvas.width, myCanvas.height);
context.fillStyle = 'red';
context.strokeStyle = 'white';
var inc = myCanvas.width / myAudio.duration;
// отображение TimeRanges
myAudio.addEventListener('seeked', function() {
var current = myAudio.buffered.length - 1;
var startX = myAudio.buffered.start(current) * inc;
var endX = myAudio.buffered.end(current) * inc;
var width = endX - startX;
context.fillRect(startX, 0, width, myCanvas.height);
});
}
Во втором примере ещё похлеще: вместо вывода на канвас отрывков, таким же циклом просто передёргивается ширина одной и той же полосы, отображающей буферизацию. Так как это происходит быстро, после этого остаётся видеть полосу с зафиксированной шириной, которая соответствует концу последнего отрывка:
myAudio.addEventListener('progress', function() {
var duration = myAudio.duration;
for (var i = 0; i < myAudio.buffered.length; i++) {
if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) {
document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%";
break;
}
}
});
И зачем нужны аж два контейнера, отображающие продолжительность аудиофайла? (с классами buffered и progress) Такое ощущение, что эти примеры писал кто-то пьяный.