点击下载教程相关资源
ModalDialog 组件是 Video.js 核心的一部分，它为全屏播放覆盖提供了一个内置用户界面。
除了内置的 Video.js 组件创建方法外，播放器还包含一个 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 文档。
与使用 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();
});就用户体验而言，这两个示例是等价的。实施者应选择更适合自己使用情况的方案。
模块化的一个常见需求是将它们的样式彼此独立。推荐的方法是为您的模态添加一个自定义 class，并使用 CSS 对其进行定位：
modal.addClass('vjs-my-fancy-modal');
川公网安备51010802032098
