Videojs.com

Video.js 指南

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

返回指南

皮肤

目录

默认皮肤

当您包含 Video.js CSS 文件（video-js.min.css）时，默认的 Video.js 皮肤就会被应用。这意味着，定制 Video.js 播放器的外观，就是利用 CSS 的层叠特性来覆盖样式。

额外的 <style> 元素

除了 Video.js CSS 文件之外，还有一些样式由 JavaScript 自动生成，并作为 <style> 元素包含在 <head> 中。

  • "vjs-styles-defaults" 元素为页面上的所有 Video.js 播放器设置默认尺寸。
  • 页面上的每个播放器都会创建一个 "vjs-styles-dimensions" 元素，用于调整其大小。这种样式处理方式旨在让您能够使用自定义 CSS 覆盖它，而无需依赖脚本或 !important 来克服行内样式。

禁用额外的 <style> 元素

在某些情况下，特别是使用可能管理 <head> 元素的框架（例如 React、Ember、Angular 等）的 Web 应用程序中，这些 <style> 元素可能是不受欢迎的。可以通过在引入 Video.js 之前设置 window.VIDEOJS_NO_DYNAMIC_STYLE = true 来禁用它们。

这将禁用所有基于 CSS 的播放器尺寸设置。播放器将默认没有 height 或 width！ 即使是尺寸属性，例如 width="600" height="300" 也将被忽略。使用此全局变量时，您将需要以适合您网站或 Web 应用程序的方式设置其自身的尺寸。

对 Player#width() 和 Player#height() 的影响

当设置了 VIDEOJS_NO_DYNAMIC_STYLE 时，Player#width() 和 Player#height() 将应用直接设置到 <video> 元素（或当前技术使用的任何元素）上的任何宽度和高度。

图标

Video.js 随附了大量通过图标字体内置到皮肤中的图标。

您可以通过将 sandbox/icons.html.example 重命名为 sandbox/icons.html，使用 npm run build 构建 Video.js，然后在您选择的浏览器中打开 sandbox/icons.html 来查看默认皮肤中所有可用的图标。

如果播放器上启用了 experimentalSvgIcons 选项，您可以使用 setIcon 方法将图标添加到自定义 Component。按照上述步骤，使用 sandbox/svg-icons.html.example 来查看可用的图标。

创建皮肤

创建皮肤的推荐方法是覆盖默认皮肤提供的样式。这样，您就不需要从零开始。

为播放器添加自定义类

为您的皮肤在播放器中创建钩子（hook）最方便的方法是为其添加一个类。您可以通过向初始的 <video> 元素添加一个类来实现此目的。

<video class="vjs-matrix video-js">...</video>

或者通过 JavaScript

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

player.addClass('vjs-matrix');

注意： vjs- 前缀是 Video.js 播放器中所有类的命名约定。

自定义样式

使用自定义样式覆盖默认样式的第一步是确定需要覆盖哪些选择器和属性。例如，假设我们不喜欢控件的默认颜色（白色），想将其更改为亮绿色（比如 #00ff00）。

为此，我们将使用浏览器的开发者工具检查播放器，并找出需要使用哪些选择器来调整这些样式——我们将添加自定义的 .vjs-matrix 选择器，以确保最终的选择器足够具体，能够覆盖默认皮肤。

在这种情况下，我们需要以下内容

/* Change all text and icon colors in the player. */
.vjs-matrix.video-js {
  color: #00ff00;
}

/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
  border-color: #00ff00;
}

/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
  background: #00ff00;
}

最后，我们可以将其保存为 videojs-matrix.css 文件，并在 Video.js CSS 之后引入它。

<link rel="stylesheet" type="text/css" href="path/to/video-js.min.css">
<link rel="stylesheet" type="text/css" href="path/to/videojs-matrix.css">

如果您创建了一个特别引以为傲的皮肤，您可以通过在 Skins wiki 页面上添加链接来分享它。创建可分享皮肤的一种方法是分叉（fork）CodePen 上的这个示例。