Video.js 指南

这些指南涵盖了 Video.js 用户的各种主题

中间件

理解中间件

中间件是函数，它们返回一个对象、一个类实例、一个原型等，这些对象、实例或原型被限定在 Player 范围内，并包含与 Tech 上方法匹配的方法。目前，中间件只能识别有限的允许方法。这些方法包括：buffered、currentTime、setCurrentTime、setMuted、setVolume、duration、muted、seekable、played、play、pause 和 volume。这些允许的方法分为三类：获取器、设置器和协调器。

有几个影响中间件的特殊方法：setSource 和 setTech。当您调用 player.src() 时，Video.js 会在内部调用这些方法。

setSource

注意：在 Video.js 7.0.5 及更早版本中，所有中间件都必须包含 setSource，并且必须将其包含在返回的对象中。

此方法将在特定源和中间件之间设置路由，并最终在 Tech 上设置源。

如果您的中间件不操作、重定向或拒绝源，您可以在较新版本的 Video.js 中省略此方法。这样做将隐式选择中间件。

在 7.0.5 及更早版本中，要选择您的中间件，您可以通过以下方式传递源：

videojs.use('*', function(player) {
  return {
    setSource: function(srcObj, next) {
      // pass null as the first argument to indicate that the source is not rejected
      next(null, srcObj);
    }
  };
});

setTech

setTech 是一个方法，一旦 Player 选择了一个 Tech 并且中间件决定了要设置哪个源之后，它会将中间件与该特定的 Tech 关联起来。您的中间件中无需包含此方法。

中间件设置器

+----------+                      +----------+
|          |  setter middleware   |          |
|          +---------------------->          |
|  Player  |                      |   Tech   |
|          <----------------------+          |
|          |  getter middleware   |          |
+----------+                      +----------+

设置器将首先在 Player 上调用，并按照注册顺序（图中从左到右）在中间件中运行，然后才使用其参数在 Tech 上调用该方法。

中间件获取器

获取器将首先在 Tech 上调用，并按照注册顺序的逆序（图中从右到左）在中间件中运行，然后才将结果返回给 Player。

中间件协调器

协调器是不仅改变 Tech 状态，还向 Player 返回一些值的方法。目前，这些是 play 和 pause。

协调器首先在 Player 上调用，按照注册顺序（下图中从左到右）在中间件中运行，然后在 Tech 上调用。结果返回给 Player 时不变，同时以注册顺序的逆序（图中从右到左）调用中间件。有关协调器的更多信息，请查看协调器部分。

+----------+                      +----------+
|          |                      |          |
|          +---mediate-to-tech---->          |
|  Player  |                      |   Tech   |
|          <--mediate-to-player---+          |
|          |                      |          |
+----------+                      +----------+

终止和协调器

协调器进行一次往返：从 Player 开始，协调到 Tech，然后将结果再次返回给 Player。中间件必须提供一个 call{method} 方法，该方法用于协调到 Tech。在返回 Player 的过程中，将转而调用 {method} 方法，该方法带有两个参数：terminated（一个布尔值，指示在协调到 Tech 阶段是否有中间件终止）和 value（从 Tech 返回的值）。

+----------+                      +----------+
|          |                      |          |
|          +----+call{method}+---->          |
|  Player  |                      |   Tech   |
|          <------+{method}+------+          |
|          |                      |          |
+----------+                      +----------+

下面给出了一个带有协调器方法的中间件骨架：

var myMiddleware = function(player) {
  return {
    callPlay: function() {
      // mediating to the Tech
      ...
    },
    play: function(terminated, value) {
      // mediating back to the Player
      ...
    },
    ...
  };
};

当中间件方法决定停止向 Tech 协调时，就会发生中间件终止。我们将在下一节中看到更多此类示例。

使用中间件

中间件注册到视频 MIME 类型，并将针对所有具有该类型的源运行。

videojs.use('video/mp4', myMiddleware);

您还可以通过在 * 上注册中间件来使其应用于所有源。

videojs.use('*', myMiddleware);

您的中间件应该是一个限定于播放器范围内的函数，并返回一个对象、类实例等，其中包含与 Tech 上方法匹配的方法。下面是一个返回对象的中间件示例：

var myMiddleware = function(player) {
  return {
    setSource: function(srcObj, next) {
      // pass null as the first argument to indicate that the source is not rejected
      next(null, srcObj);
    },
    currentTime: function(ct) {
      return ct / 2;
    },
    setCurrentTime: function(time) {
      return time * 2;
    }
  };
};

videojs.use('*', myMiddleware);

以及省略 setSource 的相同示例：

var myMiddleware = function(player) {
  return {
    currentTime: function(ct) {
      return ct / 2;
    },
    setCurrentTime: function(time) {
      return time * 2;
    }
  };
};

videojs.use('*', myMiddleware);

此中间件通过将我们从 Tech get（获取）的时间减半，并将我们在 Tech 上 set（设置）的时间加倍，从而使视频源看起来以两倍速度播放。

下面是一个使用协调器方法的中间件示例：

var myMiddleware = function(player) {
  return {
    setSource: function(srcObj, next) {
      // pass null as the first argument to indicate that the source is not rejected
      next(null, srcObj);
    },
    callPlay: function() {
      // Do nothing, thereby allowing play() to be called on the Tech
    },
    play: function(terminated, value) {
      if (terminated) {
        console.log('The play was middleware terminated.');

      // the value is a play promise
      } else if (value && value.then) {
        value
          .then(function() {
            console.log('The play succeeded!')
          })
          .catch(function (err) {
            console.log('The play was rejected', err);
          });
      }
    }
  };
};

videojs.use('*', myMiddleware);

此中间件允许 play() 调用传递到 Tech，并在 play 方法中检查播放是否成功。您可以在我们的沙盒中找到更详细的示例。

终止协调器方法

协调器方法可以通过以下方式终止：

var myMiddleware = function(player) {
  return {
    setSource: function(srcObj, next) {
      // pass null as the first argument to indicate that the source is not rejected
      next(null, srcObj);
    },
    callPlay: function() {
      // Terminate by returning the middleware terminator
      return videojs.middleware.TERMINATOR;
    },
    play: function(terminated, value) {
      // the terminated argument should be true here.
      if (terminated) {
        console.log('The play was middleware terminated.');
      }
    }
  };
};

videojs.use('*', myMiddleware);

此中间件通过在 callPlay 中返回 TERMINATOR 来始终终止对 play() 的调用。在 play 方法中，我们可以看到对 play() 的调用被终止，并且从未在 Tech 上被调用。

Videojs.com