入门

Video.js 入门概述,从基本的 CDN 使用到 Browserify,并附带示例。

下载

有几种方法可以开始使用 Video.js(当前版本为 v8.23.3),您应选择最适合您特定用例的方法。

Video.js CDN

我们的朋友 Fastly 慷慨地在其内容分发网络上为 Video.js 的所有必需文件提供托管。使用这些托管文件可能是开始使用 Video.js 最简单的方法,您只需在页面中包含以下链接。

<head>
  <link href="https://vjs.zencdn.net/8.23.3/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <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>

  <script src="https://vjs.zencdn.net/8.23.3/video.min.js"></script>
</body>

通过 npm 安装

对于更高级的工作流程,建议通过 npm 安装

$ npm install --save-dev video.js

Internet Explorer 支持

从 v7 版本开始,我们将不再支持 IE 11 之前的 Microsoft Internet Explorer 版本,包括 IE 8、9 和 10。微软已于两年前停止了对这些版本的支持,它们普遍被认为不符合现代安全标准,并且在 Video.js 浏览器使用量中占比不到 0.1%。

对于 v7 之前的 Video.js 版本,无论您最终如何将 Video.js 包含到项目中,都有一些常见事项需要牢记。核心代码库使用了一些现代 Javascript 特性 (ES5),因此如果您想支持 IE8,则需要包含一个 ES5 shim。为了简化操作,我们创建了一个您可以包含以支持 IE8 的单个文件。无论 Video.js 核心库位于何处,此文件都需要位于文档的 <head> 中。

内容概览?

如果您下载了其中一个版本或通过包管理器安装,您可能已经注意到其内容与 Github 上提供的源代码略有不同。前者仅包含使用 Video.js 所需的编译文件,而后者则包含用于创建这些文件的源代码。

分发版本

Video.js 分发版本是您下载发布版或通过包管理器安装时会获得的内容。

Video.js/
├── alt
│   ├── video.core.js
│   ├── video.core.min.js
│   ├── video.core.novtt.js
│   ├── video.core.novtt.min.js
│   ├── video.novtt.js
│   └── video.novtt.min.js
├── examples/
├── font
│   ├── VideoJS.svg
│   ├── VideoJS.ttf
│   └── VideoJS.woff
├── lang/
├── video-js-<span class="vjs-version">$LATEST_VERSION$</span>.zip
├── video-js.css
├── video-js.min.css
├── video.cjs.js
├── Video.es.js
├── Video.js
└── video.min.js

此包包含在生产站点上使用 Video.js 所需的一切。默认情况下,我们将 Video.js 与 Mozilla 出色的 VTT.js 捆绑在一起。如果出于某种原因您不需要 VTT.js 功能,您可以使用不包含 VTT.js 的 Video.js 副本。这些副本的名称中包含 novtt,并且可以在 alt/ 目录中找到。font/ 包含来自 Videojs Font 项目的所有生成的图标字体文件。lang/ 包含所有生成的翻译文件。

源代码

源代码是您检出 Video.js Git 仓库时会找到的所有内容。这包括所有源文件以及构建生产就绪版 Video.js 所需的任何工具,以及有用的开发工具,例如沙盒示例。

由于互联网的缘故,大部分根源目录是用于各种包管理器的 JSON 配置。您最可能要找的重要内容将在 src/build/ 中。src/ 包含播放器 JS 和基本皮肤的所有源文件,而 build/ 目录则包含各种 grunt 任务以及主构建文件 grunt.js

构建工具

在开始之前,您需要安装 Node.js。有关更多详细信息,请参阅 CONTRIBUTING.md

自定义

直接使用 Video.js 也可以,但我们认为最好是将其个性化。插件和皮肤让完全自定义您的播放器成为可能。

皮肤定制

播放器皮肤完全由 HTML 和 CSS 构建,包括在使用 YouTube 等其他播放器时也是如此。

皮肤更改可以很简单,例如将播放按钮居中(您只需将 'vjs-big-play-centered' 类添加到您的视频标签),也可以很复杂,例如创建全新的布局。我们已经创建了一个 codepen 项目,您可以在其中探索不同的更改。

主页主题

主页中的主题来自 Videojs Themes 库。要在您的播放器中使用它们,请导入 CSS,然后将相关类添加到您的视频标签。例如,如果您想使用 City 主题,您可以按以下方式设置您的 HTML

<!-- In the head of your document with your other CSS includes... -->
<!-- Video.js base CSS -->
<link
  href="https://unpkg.com/video.js@7/dist/video-js.min.css"
  rel="stylesheet"
/>

<!-- City -->
<link
  href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"
  rel="stylesheet"
/>

<!-- Then, in the player -->
<video class="video-js vjs-theme-city" ...></video>

设计您自己的

一个很好的起点是 Video.js 皮肤设计器,但归根结底,我们建议使用 CSS 的级联特性来简单地覆盖您想要自定义的设计部分。

插件

Video.js 本身是特意设计得非常简单的。它支持基本的视频和音频播放功能,并确保它们在不同的播放技术(“techs”)中表现一致。任何更高级的功能都作为插件构建,包括播放列表、分析、广告,以及对 HLS 和 DASH 等高级格式的支持。查看插件页面以了解可用内容。

Video.js 插件