Video.js 通常会将播放器布局为通过属性或 CSS 设置的尺寸，就像其他 DOM 元素一样。然而，我们提供了几种方式来使播放器更具流动性。

流式模式

Video.js 有一个流式模式，可以将播放器尺寸保持在特定宽高比。

默认情况下，流式模式在视频加载后会使用视频的固有尺寸，但您可以通过类或 aspectRatio 选项来更改它。

启用流式模式将禁用填充模式。如果两者都启用，流式模式优先。

您可以通过几种方式启用流式模式：

• 将 vjs-fluid、vjs-16-9 或 vjs-4-3 作为类添加到播放器元素中。
• 将 fluid 选项传递给播放器。
• 调用 player.fluid(true)。
• 将 aspectRatio 选项传递给播放器。
• 调用 player.aspectRatio('16:9')。

类

与流式模式相关的类有五个：vjs-fluid、vjs-16-9、vjs-4-3、vjs-9-16 和 vjs-1-1。

vjs-fluid 开启通用流式模式，该模式会等待视频加载以计算视频的宽高比。

此外，由于 16:9、4:3、9:16 和 1:1 宽高比非常常见，我们默认提供了这些类，如果您知道您的视频是 16:9、4:3、9:16 或 1:1，则可以使用它们。

启用流式模式

您可以将 fluid 选项传递给播放器，或者调用 player.fluid(true)。这将启用通用流式模式。

var player = videojs('vid1', {
  fluid: true
});

var player = videojs('vid2');

player.fluid(true);

设置宽高比

如果您不想使用视频元素的固有值，或者您有特定的宽高比，您可以指定一个供我们使用的宽高比。它既可以作为方法调用，也可以作为播放器的选项。

此选项的形式为由冒号分隔的两个整数，例如 16:9 或 4:3。

// make a vertical video
var player = videojs('vid1', {
  aspectRatio: '9:16'
});

var player = videojs('vid2');

// make a square video
player.aspectRatio('1:1');

禁用流式模式

您可以通过移除相关类或将 false 传递给方法来禁用流式模式。

player.fluid(false);

填充模式

填充模式将使播放器适应并填充其容器。如果您有一个响应式网站并且已经为 Video.js 提供了一个能够正确调整以适应您设计的容器，这通常会很有用。它可以通过类或选项进行设置。

如果启用了填充模式，它将关闭流式模式。如果播放器同时配置了流式和填充选项，则流式模式优先。

类

只有一个类用于此模式：vjs-fill。当可用时，Video.js 将进入填充模式。

启用填充模式

您可以将 fill 选项传递给播放器，或者调用 player.fill(true)。这将启用填充模式。

var player = videojs('vid1', {
  fill: true
});

var player = videojs('vid2');

player.fill(true);

禁用填充模式

您可以通过移除相关类或将 false 传递给方法来禁用填充模式。

player.fill(false);

响应模式

响应模式将使播放器的用户界面根据播放器的大小进行自定义。如果您有不同大小的嵌入式播放器——或者您希望流式/填充模式播放器根据其大小调整其用户界面，这将非常有用。

响应模式独立于流式模式或填充模式——它只处理播放器内用户界面的排列，而不处理播放器的大小。然而，将响应模式与流式模式或填充模式结合使用通常很有用！

类

响应模式下的播放器将根据其尺寸断点添加和移除类。默认的断点、类和尺寸如下所示：

启用响应模式

您可以通过传递 responsive 选项或调用 player.responsive(true) 来启用响应模式。

var player = videojs('vid1', {
  responsive: true
});

var player = videojs('vid2');

player.responsive(true);

禁用响应模式

您可以通过将 false 传递给方法来禁用响应模式。

player.responsive(false);

自定义断点

默认断点可以通过传递 breakpoints 选项或调用 player.breakpoints({...}) 来定制。

var player = videojs('vid1', {
  breakpoints: {
    medium: 500
  }
});

var player = videojs('vid2');

player.breakpoints({
  medium: 500
});

断点对象应包含与上表中“名称”匹配的键，以及与上表中“最大宽度”匹配的值。“最小宽度”是通过在前一个断点的“最大宽度”上加一计算得出的。

任何时候自定义断点，之前的自定义都将被丢弃。

恢复默认断点

可以通过调用 player.breakpoints(true) 来恢复默认断点。

var player = videojs('vid1');

player.breakpoints(true);

这仅在断点先前已自定义的情况下有用。