layout(布局)

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-fluidvjs-16-9vjs-4-3

vjs-fluid打开general fluid模式,等待视频加载以计算视频的纵横比。

另外,由于16:94:3的纵横比非常常见,我们默认将它们作为类提供给您,如果您知道您的视频是16:9或4:3。


启用流体模式

您可以将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);


响应模式

响应模式将使播放器的UI根据播放器的大小进行自定义。如果您嵌入了不同大小的嵌入,或者希望流体/填充播放器根据其大小调整用户界面,这将非常有用。
响应模式独立于流体模式或填充模式-它仅处理播放器中UI的布置,而不处理播放器的大小。但是,将响应模式与流体模式或填充模式结合使用通常很有用!

处于响应模式的播放器将根据其大小断点添加和删除类。默认断点,类和大小概述如下:

Name Class Min. Width Max. Width
tiny vjs-layout-tiny 0 210
xsmall vjs-layout-x-small 211 320
small vjs-layout-small 321 425
medium vjs-layout-medium 426 768
large vjs-layout-large 769 1440
xlarge vjs-layout-x-large 1441 2560
huge vjs-layout-huge 2561 Infinity


启用响应模式

您可以通过传递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
});

断点对象应具有与上表中的名称匹配的键和与最大值匹配的值。上表的宽度。在民。宽度是通过将上一个断点的“ 最大值”加1来计算的。宽度。
任何时候定制断点,先前的定制都会被丢弃。


恢复默认断点

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

var player = videojs('vid1');
player.breakpoints(true);
仅在先前已定制断点的情况下,此功能才有用。


上一篇:languages(语言) 下一篇:live(直播)