模态对话框

点击下载教程相关资源

ModalDialog 组件是 Video.js 核心的一部分，它为全屏播放覆盖提供了一个内置用户界面。

创建 ModalDialog

除了内置的 Video.js 组件创建方法外，播放器还包含一个 createModal() 辅助方法。

我们将在本文档中演示这两种方法，创建一个模态，当播放器暂停时打开，关闭时恢复播放。

使用 createModal() 的示例

createModal() 方法用于创建一次性模态，这些模态需要临时打开。因此，它们在创建后会立即打开，默认情况下，在关闭后会立即销毁。

var player = videojs('my-player');

player.on('pause', function() {

  // 默认情况下，模态是临时的。它们在关闭时会自行销毁；
  // 因此，每次暂停播放器时，我们都可以创建一个新的模态，而不必担心留下多余的节点。
  var modal = player.createModal('This is a modal!');

  // 模态关闭后，恢复播放。
  modal.on('modalclose', function() {
    player.play();
  });
});

createModal() 方法还会接收第二个参数 - 一个包含模态选项的对象。有关全套选项，请参阅API 文档。

使用 ModalDialog 构造函数的示例

与使用 createModal() 不同，使用任何常见组件创建方法创建的模态默认情况下都不会打开。因此，这种方法更适用于需要在 DOM 中无限期存在的模态。

var player = videojs('my-player');
var ModalDialog = videojs.getComponent('ModalDialog');

var modal = new ModalDialog(player, {
  // 我们不希望该模式关闭后消失。
  temporary: false
});

player.addChild(modal);

player.on('pause', function() {
  modal.open();
});

player.on('play', function() {
  modal.close();
});

就用户体验而言，这两个示例是等价的。实施者应选择更适合自己使用情况的方案。