skins(皮肤)

默认皮肤

包含Video.js CSS文件(video-js.min.css)时,将应用默认的Video.js外观。这意味着自定义Video.js播放器的外观是要利用CSS的级联方面来覆盖样式。


其他<style>要素

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


  • "vjs-styles-defaults"元素为页面上所有的Video.js播放器设置默认的尺寸。
  • 为页面上的每个播放器创建一个"vjs-styles-dimensions"元素,并用于调整其大小。这种样式处理方式允许您使用自定义CSS覆盖它,而不依赖于脚本或!important克服内联样式。


禁用其他<style>元素

在某些情况下,尤其是对于使用可管理<head>元素(例如React,Ember,Angular等)的框架的Web应用程序,这些<style>元素是不可取的。可以通过window.VIDEOJS_NO_DYNAMIC_STYLE = true在包含Video.js之前进行设置来禁用它们。

这将禁用所有基于CSS的播放器大小调整。默认情况下播放器没有height或width!比如width="600" height="300"也会被忽略。在使用这个全局变量时,您需要以适合其网站或网络应用程序的方式设置自己的尺寸。


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

当VIDEOJS_NO_DYNAMIC_STYLE被设置时,player# width()和player# height()将应用直接设置到<video>元素(或当前技术使用的任何元素)的宽度和高度。


图标

Video.js通过图标字体附带了许多内置于皮肤的图标。

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


创建皮肤

建议的创建外观的过程是覆盖默认外观提供的样式。这样,您无需从头开始。

向播放器添加自定义类

在播放器中为您的皮肤创建钩子的最便捷方法是为其添加一个类。您可以通过在初始<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">
如果您创建了特别引以为傲的皮肤,则可以通过在“ 皮肤” Wiki页面上添加链接来共享它。创建可共享外观的一种方法是在CodePen上分叉此示例



上一篇:setup(安装) 下一篇:tech(技术)