Javascript: ошибка при загрузке видео, но только на Chrome

Question

У меня есть страница HTML, которая загружает видео и отображает индикатор выполнения загрузки.

Элемент видео создается следующим образом:

function createVideo() {  
  var video = document.createElement("VIDEO");
  video.setAttribute('controls', '');
  video.setAttribute('preload', 'auto');
  video.setAttribute('width', width);
  video.setAttribute('id', 'video');

  var source = document.createElement("SOURCE");
  source.setAttribute('src', "https://www.example.com/video.mp4");
  source.setAttribute('type', 'video/mp4');


  video.addEventListener('progress', function() {

    var endBuf = this.buffered.end(0); //1
    var soFar = parseInt(((endBuf / this.duration) * 100));
    var progressBar = document.getElementById("progressBar");

    if (soFar < 100) {
      progressBar.setAttribute('value', soFar);
    } else {
      progressBar.style = "display:none;";
    }

  });

Поведение, которое я имею в браузерах примерно так:

1. Safari показывает страницу видео, но видео не воспроизводится автоматически. На консоли не отображается ошибка.
2. Firefox автоматически воспроизводит видео и не отображает ошибки на консоли.
3. Chrome автоматически воспроизводит видео и отображает эту ошибку на консоли:

2 кода. js: 368 Uncaught DOMException: не удалось выполнить 'end' для 'TimeRanges': предоставленный индекс (0) больше или равен максимальной границе (0). на HTMLVideoElement. (https://example.com/code.js: 368: 32 ) (анонимно) @ functions. js: 368

Строка 368 - это строка, помеченная // 1 в приведенном выше коде.

Как мне это решить?

Answer 1

Возможно, что Chrome вызывает вашего слушателя "progress" до того, как видео полностью загрузится, и это означает, что у this.buffered еще нет TimeRanges. Возможно, вы захотите обернуть тело вашего слушателя «progress» в оператор для обработки, если в буфере не указано TimeRanges:

  video.addEventListener('progress', function() {
    if(this.buffered.length > 0) {
        var endBuf = this.buffered.end(0);
        var soFar = parseInt(((endBuf / this.duration) * 100));
        var progressBar = document.getElementById("progressBar");

        if (soFar < 100) {
          progressBar.setAttribute('value', soFar);
        } else {
          progressBar.style = "display:none;";
        }
    } else {
        progressBar.style = "display:none;";
    }

  });