Videojs.com

Video.js 指南

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

返回指南

模态对话框

目录

ModalDialog 组件是 Video.js 核心的一部分，为全播放器覆盖提供内置 UI。

创建模态对话框

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

本文将通过这两种方法演示如何创建一个模态框，该模态框在播放器暂停时打开，并在关闭时恢复播放。

使用 createModal() 的示例

createModal() 方法旨在创建一次性模态框，用于临时目的。因此，它们在创建后会立即打开，并且默认情况下在关闭后立即销毁。

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

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

  // Modals are temporary by default. They dispose themselves when they are
  // closed; so, we can create a new one each time the player is paused and
  // not worry about leaving extra nodes hanging around.
  var modal = player.createModal('This is a modal!');

  // When the modal closes, resume playback.
  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, {

  // We don't want this modal to go away when it closes.
  temporary: false
});

player.addChild(modal);

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

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

就用户体验而言，这两种示例是等效的。实现者应根据其用例选择最适合的方法。

独立样式化模态框

模态框的一个常见需求是相互独立地样式化它们。推荐的方法是为模态框添加一个自定义类，然后使用 CSS 定位该类。

modal.addClass('vjs-my-fancy-modal');