videojs 使用手册

简介: 因为最近做了一个关于直播与录播的项目,需要用到播放器,常用的 video 标签无法满足兼容性和可配置性,为了降低编写难度,使用了 videojs 这个库来辅助开发,这里记录一下,方便之后使用回忆。

介绍

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 引入

  1. 通过 cdn、script 标签引入
<\script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
//把\去掉
  1. 通过 npm 安装
npm install video.js --save
or yarn add video.js

配置

用法就不多简述了,参考 videojs官网这篇文章

因为英文看的吃力,所以不想看第二遍,于是把一些配置说明记录一下。

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('播放器初始化完成');
});

自定义样式

主要是 这篇文章

首先要了解实例的样式是怎么产生的,官网很清楚的说到它的样式来源于两部分:

  1. 是来源于 video-min.css(如果包含,一般都包含)
  2. 是来源于 videojs 代码执行产生的,并包含在 < head > 的 < style > 元素中

vjs-styles-defaults元素检查如果发现这个类则说明它来自于默认样式

vjs-styles-dimensions 而这样的类则说明它来自于开发者自定义的样式,可以覆盖掉 defaults 样式,而不用依赖脚本或者用!important来克服内联样式

自定义样式的步骤:

tips: 建议创建外观的过程是覆盖默认外观提供的样式。这样,你就不需要从头开始。

tips: 在播放器中为你的皮肤创建一个钩子的最方便的方法是为它添加一个类。你可以通过在初始的 < video > 元素中添加一个类来实现:

tips: vjs- 前缀是 Video.js 播放器中包含的所有类的约定。

  1. 向播放器添加一个自定义类,两种方法
<!-- 通过html引入 -->
<video class="vjs-matrix video-js">...</video>

<!-- 通过js引入 -->
<script>
var player = videojs('my-player');

player.addClass('vjs-matrix');
</script>
  1. 使用自定义样式覆盖默认样式的需要确定去覆盖哪些选择器和属性。例如,假设我们不喜欢控件的默认颜色(白色) ,我们想将它们更改为亮绿色(比如 # 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;
}
  1. 最后,我们可以将其保存为 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">

异常处理经验

  1. 初始化错误一般是由生命周期引起,可以通过改变初始化时间点来解决,一般了解 JavaScript 事件循环很好理解
  2. option 里的 notSupportedMessage 属性只能处理 source 错误的提示,如果想要对各种错误进行差异化处理,可以通过 onError 事件中处理,携带的参数是一个 error 对象,可以通过 param.error_来区分是哪种播放错误,然后通过 param.errDisplay 来进行差异化的提示,主要用到 contentEl()createEl 这两个 api,前者获取提示元素,然后对这个元素进行改造,通过后者挂到 dom 中。如果不想让它显示,则通过 close() 这个API关掉。 更多参考 这篇文章
目录
相关文章
|
5月前
|
JavaScript
tailwindcss使用教程
【8月更文挑战第1天】
67 3
|
6月前
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
699 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
6月前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
59 0
|
7月前
|
存储 开发框架 JavaScript
程序与技术分享:CKEditor与CKFinder使用
程序与技术分享:CKEditor与CKFinder使用
204 0
|
小程序 JavaScript 前端开发
小程序wxs使用教程
wxs是小程序的一种脚本语言,它类似JavaScript,但是与JavaScript有所不同。wxs是一种数据绑定和逻辑处理的语言,它可以在wxml中使用,并且可以在wxml中直接调用。使用wxs可以实现更高效、更灵活的数据处理和渲染。通过本篇博客的介绍,我们了解了原生小程序如何使用wxs以及传参等技术,可以更好地实现数据的处理和渲染。在使用wxs时,需要注意wxs模块中不能使用页面逻辑层的数据和方法,并且可以使用module.exports将模块中的方法暴露出来,以便在其他地方使用。
424 0
|
视频直播 内存技术
【视频直播篇三】vue-cli3集成vue-video-player
本文着重介绍vue-cli3集成vue-video-player
494 0
微信如何打开 VConsole #104
微信如何打开 VConsole #104
559 0
sound.js # pixi辅助插件 — 中文翻译教程
sound.js # pixi辅助插件 — 中文翻译教程
310 0
|
前端开发 JavaScript
Viewer,一款好用的图片预览插件
在项目中,需要点击查看图片,本次我用了 viewer 这款插件
634 0
Viewer,一款好用的图片预览插件

热门文章

最新文章