介绍
Video.js is an extendable framework/library around the native video element. It does the following:
- Offers a plugin API so that different types of video can be handed to the native video element
- Unifies the native video API across browsers (polyfilling support for features if necessary)
- Offers an extendable and themable UI
- Ensures accessibility for keyboard and screen reader users
- Has a set of core plugins that offer support for additional video formats...
上面这段话的大概意思就是：videojs 是围绕客户端本地的 video 标签的一个框架，它提供了一个插件 API，用来接收不同类型的视频，并且提供了一个统一的 API，解决了不同浏览器的兼容性问题，提供了一个可扩展的 UI，提供了一个可访问性的 UI，提供了一些核心插件，用来支持额外的视频格式。
引入 & 安装
支持通过 cdn 和 npm 引入
- 通过 cdn、script 标签引入
<\script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
//把\去掉- 通过 npm 安装
npm install video.js --save
or yarn add video.js配置
因为英文看的吃力，所以不想看第二遍，于是把一些配置说明记录一下。
options={
controls: true, // 是否显示控制条
poster: 'xxx', // 视频封面图地址,记住这一点poster是绝对地址，如果给相对位置会请求到你封装的地址中去，向封装的地址发起请求。
preload: 'auto',
autoplay: false,
fluid: true, // 自适应宽高，也可以设置为常见比例"4:3"，"16:9"
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
liveDisplay:true, // 直播提示
inactivityTimeout: false,
controlBar: { // 设置控制条组件
/* 设置控制条里面组件的相关属性及显示与否
'currentTimeDisplay':true,
'timeDivider':true,
'durationDisplay':true,
'remainingTimeDisplay':false,
volumePanel: {
inline: false,
}
*/
/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
children: [
{name: 'playToggle'}, // 播放按钮
{name: 'currentTimeDisplay'}, // 当前已播放时间
{name: 'progressControl'}, // 播放进度条
{name: 'durationDisplay'}, // 总时间
{ // 倍数播放
name: 'playbackRateMenuButton',
'playbackRates': [0.5, 1, 1.5, 2, 2.5]
},
{
name: 'volumePanel', // 音量控制
inline: false, // 不使用水平方式
},
{name: 'FullscreenToggle'} // 全屏
]
},
sources:[ // 视频源
{
src: 'xxx', // 视频地址
type: 'video/mp4' // 视频格式
}
],
]
}实例
有了配置之后就可以生成实例了，牢记一点：videojs 是需要一个意见渲染出来挂载到 dom 上的 video 节点来作为容器，所以如果是通过 script 标签引入的话，需要将 script 放在 video 之后，否则会报“该标签不支持”的错误。同理，通过 npm 安装的话需要注意当使用 videojs 实例化的时候必须保证 dom 节点存在，一般这块出问题都是生命周期的问题。
import Videojs from "video.js";
var myPlayer = Videojs('videoId', options, function() {
// 这个函数会在videojs初始化完成后执行
// 函数的this指向实例对象，所以可以在这个函数里做一些事件监听和一些dom操作
// on() and addEventListener()
// 语法糖：this.on('event', function(e) {});
// this.addEventListener('event', function(e) {});
// off() and removeEventListener()
// 删除监听器：this.off('event', function(e) {});
// this.removeEventListener('event', function(e) {});
// 它支持的默认事件列表有：play,pause,waitting,
// timeupdate,ended,error,seeking,seeked等常见的事件
// 通过对这些事件进行监听我们可以做一些异常处理
// 触发事件this.trigger('dispose')
console.log('播放器初始化完成');
});自定义样式
主要是 这篇文章
首先要了解实例的样式是怎么产生的，官网很清楚的说到它的样式来源于两部分：
- 是来源于 video-min.css（如果包含，一般都包含）
- 是来源于 videojs 代码执行产生的，并包含在 < head > 的 < style > 元素中
vjs-styles-defaults元素检查如果发现这个类则说明它来自于默认样式
vjs-styles-dimensions 而这样的类则说明它来自于开发者自定义的样式，可以覆盖掉 defaults 样式，而不用依赖脚本或者用!important来克服内联样式
自定义样式的步骤：
tips: 建议创建外观的过程是覆盖默认外观提供的样式。这样，你就不需要从头开始。tips: 在播放器中为你的皮肤创建一个钩子的最方便的方法是为它添加一个类。你可以通过在初始的 < video > 元素中添加一个类来实现：
tips: vjs- 前缀是 Video.js 播放器中包含的所有类的约定。
- 向播放器添加一个自定义类，两种方法
<!-- 通过html引入 -->
<video class="vjs-matrix video-js">...</video>
<!-- 通过js引入 -->
<script>
var player = videojs('my-player');
player.addClass('vjs-matrix');
</script>- 使用自定义样式覆盖默认样式的需要确定去覆盖哪些选择器和属性。例如，假设我们不喜欢控件的默认颜色（白色） ，我们想将它们更改为亮绿色（比如 # 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.min.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">异常处理经验
- 初始化错误一般是由生命周期引起，可以通过改变初始化时间点来解决，一般了解 JavaScript 事件循环很好理解
- option 里的 notSupportedMessage 属性只能处理 source 错误的提示，如果想要对各种错误进行差异化处理，可以通过 onError 事件中处理，携带的参数是一个 error 对象，可以通过 param.error_来区分是哪种播放错误，然后通过
param.errDisplay来进行差异化的提示，主要用到contentEl()和createEl这两个 api，前者获取提示元素，然后对这个元素进行改造，通过后者挂到 dom 中。如果不想让它显示，则通过close()这个API关掉。 更多参考 这篇文章
