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自动播放视频并在控制台上显示此错误：

2codes.js：368未捕获的DOMException：无法在'TimeRanges'上执行'end'：提供的索引（0）大于或等于最大界限（0）。在HTMLVideoElement。 （https://example.com/code.js:368:32）（匿名）@ functions.js：368

第368行是在上面的代码中标记为// 1的那一行。

我该如何解决？

Answer 1

[Chrome可能在视频完全加载之前触发了您的“进度”监听器，这意味着this.buffered还没有TimeRanges。您可能会考虑在缓冲区中未指定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;";
    }

  });