Question

我想预加载同一视频的各个章节。因此，当有人跳到新的章节时，就没有缓冲。

例如，如果第一章从00:00开始，而下一章从00:15开始，我希望我的播放器事先预先加载每章2-3秒。

Answer 1

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

使用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>

专业人士：解决了第一个代码段的问题。

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

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

1 个答案: