下载
有几种方法可以开始使用 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 等高级格式的支持。查看插件页面以了解可用内容。