Gary Katsevman2016-06-01

Video.js 5 的流体模式和播放列表选择器

工作原理

在 Video.js 5.0 中，我们增加了对 Video.js 真正流体布局的支持。你可以在 video.js 网站上看到一个示例。

这是通过使用固有比例实现的。Video.js 为你承担了繁重的工作。

如何在 Video.js 中使用它

在 Video.js 中，要使播放器流体化，你可以设置 fluid 选项

let player = videojs('preview-player', {
  fluid: true
});

或者你可以向播放器添加以下流体类之一：.vjs-fluid, .vjs-4-3, .vjs-16-9

<video id="preview-player" class="video-js vjs-fluid" controls data-setup={}>

.vjs-4-3 保持视频的 4:3 宽高比，而 .vjs-16-9 保持 16:9 的宽高比。.vjs-fluid 则有些特殊。它会等待视频元数据加载，然后使用视频的宽度和高度来计算视频应使用的正确宽高比。

播放列表选择器

如果只有播放器本身，这会很好用。但如果你试图将播放列表附加到视频元素并使其保持相同高度呢？就像我们在 Video.js 网站上的高级示例页面所做的那样？

我们可以根据播放列表选择器或容器元素的宽度来计算顶部填充应为多少，但这样每次视频更改时，我们都需要重新计算播放列表选择器的高度。相反，我们可以依靠 Video.js 来完成所有工作。

附加播放列表选择器

对于这个示例，我们使用 videojs-playlist-ui 和 videojs-playlist 插件来实现播放列表功能。然后我们将播放器包裹在一个容器中，并将 playlist-ui 元素也放在里面。

<section class="main-preview-player">
  <video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com.cn/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>

  <ol class="vjs-playlist"></ol>
</section>

现在我们可以相对快速地使用一些 CSS 使它们对齐

.video-js {
  width: 70%;
  float: left;
}
.vjs-playlist {
  width: 30%;
  float: right;
}

如何使其流体化

如前面的截图所示，它并未像上面的截图那样与播放器正确对齐。Video.js 会计算宽高比，然后向页面添加样式表

.preview-player-dimensions.vjs-fluid {
  padding-top: 41.66666666666667%;
}

该百分比会产生 2.4 的宽高比，这与海洋视频片段的宽高比相匹配。

因此，为了确保播放列表选择器具有相同的高度，我们只需向其添加播放器尺寸类即可

<ol class="vjs-playlist preview-player-dimensions vjs-fluid"></ol>

如何使其对齐

使这两者正确对齐的最简单方法之一是使用 flexbox。它将使播放器和播放列表选择器增长以填充所需的尽可能多的空间。此外，如果页面宽度太小，播放列表选择器会折叠到播放器下方。Flexbox 在许多平台上都可用。然而，一些浏览器在 flexbox 规范演变时就已经在实现它了。最好通过 autoprefixer 这样的工具来处理此 CSS。使用 autoprefixer 并不能使其在不支持 flexbox 的浏览器上工作，但会显著增加平台支持。

首先，我们将 display 设置为 flex，并添加一些用于换行和尺寸的属性

.main-preview-player {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

flex-wrap 允许播放列表选择器在容器宽度太小时换到下一行。然后，我们希望将播放器和播放列表选择器相对于容器定位，并设置一些默认和最小尺寸

.video-js,
.vjs-playlist {
  position: relative;
  min-width: 300px;
  min-height: 150px;
  height: 0;
}

最后，我们希望将 flex 设置应用于播放器和播放列表选择器

.video-js {
  flex: 3 1 70%;
}

.vjs-playlist {
  flex: 1 1 30%;
}

这告诉播放器要增长并占据播放列表选择器 3 倍的空间，并且默认宽度为 70%。播放列表选择器本身默认宽度为 30%，并允许根据需要增长和收缩。现在，如果我们在浏览器中加载它，我们会看到一个问题。播放列表的高度不对

这是因为 playlist-ui 插件在其元素上设置了自己的填充，最终覆盖了 preview-player-dimensions 的 padding-top。我们可以通过强制使用我们想要的 padding-top 来解决这个问题。然而，尽管这解决了我们的高度问题，但我们的项目在哪里呢？哦，你需要滚动才能看到它们。这似乎不太理想。

发生这种情况是因为我们的 padding-top 在播放列表选择器内部；它将所有元素向下推，导致需要滚动才能看到它们。

最终解决方案

最终，我们需要做的是将播放列表元素包裹在一个可伸缩的容器中，这样 padding-top 就不会将播放列表项目向下推。

<div class="playlist-container  preview-player-dimensions vjs-fluid">
  <ol class="vjs-playlist"></ol>
</div>

我们还将 vjs-playlist 的引用更改为 playlist-container，并将播放列表选择器绝对定位在其容器内部

.playlist-container {
  position: relative;
  min-width: 300px;
  min-height: 150px;
  height: 0;
}

.playlist-container {
  flex: 1 1 30%;
}

.vjs-playlist {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

现在我们得到了我们想要的结果

现在，整体展示

HTML 代码

<section class="main-preview-player">
  <video id="preview-player" class="video-js vjs-fluid" controls preload="auto" crossorigin="anonymous">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com.cn/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>

  <div class="playlist-container  preview-player-dimensions vjs-fluid">
    <ol class="vjs-playlist"></ol>
  </div>
</section>

以及 CSS 代码

.main-preview-player {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.video-js,
.playlist-container {
  position: relative;
  min-width: 300px;
  min-height: 150px;
  height: 0;
}

.video-js {
  flex: 3 1 70%;
}

.playlist-container {
  flex: 1 1 30%;
}

.vjs-playlist {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Videojs.com

Video.js 博客