如何开始预加载同一视频的多个部分/章节 [英] How to start preloading multiple parts/chapters of a same video

问题描述

我想预加载同一视频的各个章节.这样当有人跳到新章节时就没有缓冲了.

I want to preload various chapters of the same video. So that when someone jumps to a new chapter there's no buffering.

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

For example if first chapter starts from 00:00 and the next one starts from 00:15 I want my player to preload 2-3 seconds of each chapter beforehand.

推荐答案

您可以尝试这种方法，但我不确定这是最好的方法:

You could try this approach, but I'm not sure it's the best one :

• 使用 canplay 事件.当加载了足够的数据(几帧)时，它会触发.

• Use the canplay event. It will fire when enough data is loaded (a few frames).

每次触发时，转到下一章并等到它再次触发.

Each time it fires, go to your next chapter and wait until it fires again.

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

Do so until you loaded all chapters, then remove the event and set its video's currentTime to 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时，浏览器仍然会有一些时间来缓冲图像，即使是预加载的.

Please note that when you change the currentTime, there will still be a little time for browser to buffer images, even preloaded.

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>

优点:它可以满足您的要求.

Pros : It does what you ask.

缺点:在首次加载之前，您必须等待一段时间.

Cons : you will have to wait a bunch of time before it's first loaded.

可能的解决方法，使用两个视频，一个现在可以播放，另一个带有章节，将替换第一个:

Possible workaround, use two videos, one playable right now, and the other one, with chapters, going to replace the first one :

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: solved the problem of first snippet.

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

cons: since you'll be loading two videos at the same time, the loading of chapters will take even more time, and the playing of the first video may suffer from this.

这篇关于如何开始预加载同一视频的多个部分/章节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！