如何开始预加载同一视频的多个部分/章节

你可以尝试这种方法，但我不确定它是最好的方法：

• 使用canplay事件。当加载了足够的数据（几帧）时，它将启动。

• 每次它开火时，转到下一章，等待它再次开火。

• 这样做直到加载了所有章节，然后删除该事件并将其视频的currentTime设置为0。

Javascript：

var chapters = [50, 100, 200, 300];
var j = 0;
var vid = document.querySelector('video');
vid.addEventListener('canplay', canplay);
function canplay() {
  if (j < chapters.length)
    this.currentTime = chapters[j++];
  else {
    this.removeEventListener('canplay', canplay);
    this.currentTime = 0;
  }
}

请注意，当您更改currentTime时，浏览器仍将有一点时间来缓冲图像，即使是预加载的图像

var chapters = [50, 100, 200, 300];
var j = 0;
var vid = document.querySelector('video');
vid.addEventListener('canplay', canplay);
function canplay() {
  if (j < chapters.length)
    this.currentTime = chapters[j++];
  else {
    this.removeEventListener('canplay', canplay);
    this.currentTime = 0;
    // remove the condom
    var c = document.querySelector('#condom');
    c.parentNode.removeChild(c);
    showLinks();
  }
}
function showLinks() {
  var links = document.querySelector('#links');
  links.innerHTML = "";
  for (var i = 0; i < chapters.length; i++) {
    var c = document.createElement('a');
    c.href = "#";
    // add an attribute to store the chapter time
    c.chapter = chapters[i];
    c.addEventListener('click', function(e) {
      e.preventDefault();
      // set the video to our time
      vid.currentTime = this.chapter;
    });
    c.innerHTML = 'chapter' + i;
    links.appendChild(c);
  }
}

html,body{ margin:0 }
a { margin:.5em; }
#condom{ position:absolute; top:0; left:0; height:170px; width:303px; z-index:9999; background:rgba(255,255,255, 0.7); text-align:center; }
#condom>span{ position:relative;  top:50%; transform:translateY(-50%); }

<video controls="true" preload="auto" height="170">
  <source type="video/ogg" src="http://media.w3.org/2010/05/bunny/movie.ogv">
  <source type="video/mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4">
</video>
<div id="links"></div>
<div id="condom"><span>Your video is loading</span></div>

优点：它能满足你的要求。

缺点：在第一次加载之前，您必须等待一段时间。

可能的解决方法，使用两个视频，一个现在可以播放，另一个有章节，将取代第一个：

var chapters = [50, 100, 200, 300];
var j = 0;
var vid = document.querySelector('#withChapters');
var first = document.querySelector("#first");
vid.addEventListener('canplay', canplay);
function canplay() {
  if (j < chapters.length)
    this.currentTime = chapters[j++];
  else {
    this.removeEventListener('canplay', canplay);
    // We're not playing the first video ?
    if (first.paused) {
      // set us to its current position
      this.currentTime = first.currentTime;
      // remove the old one and let's replace it
      first.parentNode.removeChild(first);
      this.style.display = "block";
    }//else we'll do it later
    //anyway, show the links now
    showLinks();
  }
}
function showLinks() {
  var links = document.querySelector('#links');
  links.innerHTML = "";
  for (var i = 0; i < chapters.length; i++) {
    var c = document.createElement('a');
    c.className = "chapter_links";
    c.href = "#";
    // add an attribute to store the chapter time
    c.chapter = chapters[i];
    c.addEventListener('click', function(e) {
      e.preventDefault();
      // set the video to our time
      vid.currentTime = this.chapter;
      // he's still there?
      if (first) {
        // And he's playing ? so are we
        if (!first.paused) vid.play();
        // anyway, now is "later"
        first.parentNode.removeChild(first);
        vid.style.display = "block";
      }
    });
    c.innerHTML = 'chapter' + i;
    links.appendChild(c);
  }
}

a { margin: .5em; }

<video id="first" controls preload="auto" height="170">
  <source type="video/ogg" src="http://media.w3.org/2010/05/bunny/movie.ogv">
  <source type="video/mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4">
</video>
<video id="withChapters" style="display:none" controls preload="auto" height="170">
  <source type="video/ogg" src="http://media.w3.org/2010/05/bunny/movie.ogv">
  <source type="video/mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4">
</video>
<div id="links">Please wait while chapters are loading ...</div>

pros：解决了第一个片段的问题。

cons：由于您将同时加载两个视频，因此加载章节将花费更多时间，第一个视频的播放可能会因此受到影响。