点击下载教程相关资源
Video.js 可通过 CDN 和 npm 正式获取。
Video.js 不仅能与 HTML <script> 和 <link> 标记配合使用，还能与所有主流捆绑程序/打包程序/构建程序配合使用，如 Browserify、Node、WebPack 等。
有关详情，请参阅“下载 & 安装”。
注意：Video.js 可与 <video> 和 <audio> 元素一起使用，但为简单起见，我们接下来将只使用 <video> 元素。
一旦在页面上加载了 Video.js，就可以创建播放器了！
Video.js 的核心优势在于它可以装饰标准的 <video> 元素并模拟其相关事件和 API，同时提供基于 DOM 的可定制用户界面。
Video.js 支持 <video> 元素的所有属性（如控件、预加载等），但它也支持自己的选项。创建 Video.js 播放器并将选项传递给它的方法有两种，但它们都以带有属性 的标准 <video> 元素为起点：
<video> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> </video>
你也可以使用 <video-js> 元素代替 <video> 元素。在某些情况下，使用 <video> 元素并不可取，因为浏览器可能会在播放器初始化前显示未渲染的控件或尝试加载源文件，而使用 <video-js> 自定义元素则不会出现这种情况：
<video-js> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> </video-js>
默认情况下，当网页加载完成时，Video.js 会扫描带有 data-setup 属性的 <video> 元素。data-setup 属性用于向 Video.js 传递选项。最简单的示例如下：
<video data-setup='{"width":"640px"}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>注意：data-setup 必须使用单引号，因为它将包含 JSON。
在现代 web 中，页面加载完成时可能往往不存在 <video> 元素。在这种情况下，无法进行自动设置，但可以通过 videojs 函数进行手动设置。
调用该函数的一种方法是向其提供一个与 <video> 元素 id 属性匹配的字符串：
<video id="my-player">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
<script type="text/javascript">
// 其中，"my-player" 是 id 属性的值
videojs('my-player');
</script>不过，使用 id 属性并不总是实用的；因此，videojs 函数接受 DOM 元素来代替 id 属性：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video-js id="vid1">
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video-js>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
// 使用 document.getElementById 根据 ID 获取 DOM 对象
const player = videojs(document.getElementById("vid1"), {
preload: "auto",
controls: true,
width: "640",
height: "264px",
poster: "../resources/oceans.jpg"
});
</script>
</body>
</html>创建播放器后，Video.js 会在内部对其进行跟踪。有几种方法可以获取已存在播放器的引用。
使用已存在播放器元素的 ID 调用 videojs() 将返回该播放器，而不会创建另一个播放器。
如果没有与参数匹配的播放器，则会尝试创建一个。
有时，您想获得播放器的引用，又要避免调用 videojs() 方法存在的潜在副作用。这可以通过调用 videojs.getPlayer() 来实现，调用时可以使用与元素 ID 匹配的字符串，也可以使用元素本身。
videojs.players 属性公开所有已知播放器。方法 videojs.getPlayers() 会返回相同的对象。
播放器存储在此对象中，其键与其 ID 相匹配。
注意：从没有 ID 的元素创建的播放器将被分配一个自动生成的 ID。
注：本指南仅介绍如何在设置播放器时传递选项。有关所有可用选项的完整参考资料，请参阅选项指南（https://videojs.com/guides/options）。
有三种方法可将选项传递给 Video.js。由于 Video.js 会装饰 HTML5 的 <video> 元素，因此许多可用选项也可作为标准 <video> 标记属性使用：
<video controls autoplay preload="auto" ...>
或者，也可以使用 data-setup 属性以 JSON 格式传递选项。这也是将非标准选项设置到 <video> 元素的方法：
<video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>注意：data-setup 的值必须使用单引号，因为它包含的 JSON 字符串必须使用双引号。
最后，如果不使用 data-setup 属性来触发播放器设置，可以将播放器选项对象作为第二个参数传递给 videojs 函数：
videojs('my-player', {
controls: true,
autoplay: false,
preload: 'auto'
});注意：不要同时使用 data-setup 和选项对象。
所有播放器的默认选项可在 videojs.options 中找到，并可直接更改。例如，为未来所有播放器设置 {autoplay:true}：
videojs.options.autoplay = true;
许多属性都是所谓的布尔属性。这意味着它们要么开要么关。在这种情况下，属性应该没有值（或应该以其名称作为值）—— 它的存在意味着开启，它的缺失意味着关闭。
这些都是不正确的：
<video controls="true" ...> <video loop="true" ...> <video controls="false" ...>
注意：controls="false" 的示例可能会让新开发人员感到困惑 —— 它实际上会打开控件！
这些都是正确的：
<video controls ...> <video loop="loop" ...> <video ...>
由于 Video.js 技术有可能是异步加载的，因此在设置后立即与播放器交互并不总是安全的。因此，Video.js 播放器有一个 "就绪（readiness）" 的概念，使用过 jQuery 的人都不会陌生。
基本上，Video.js 播放器可以定义任意数量的就绪回调。有三种方法可以传递这些回调。在每个示例中，我们都将为播放器添加一个相同的类：
将回调作为第三个参数传递给 videojs() 函数：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
<style type="text/css">
<!-- 添加红色边框 -->
.my-example { border:solid 4px red; }
</style>
</head>
<body>
<video-js id="vid1">
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video-js>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
const player = videojs(document.getElementById("vid1"), {
preload: "auto",
controls: true,
width: "640",
height: "264px",
poster: "../resources/oceans.jpg"
}, function() {
// 嘿，看这里，给给播放器添加 class
this.addClass('my-example');
});
</script>
</body>
</html>向播放器的 ready() 方法传递回调：
var player = videojs('my-player');
player.ready(function() {
this.addClass('my-example');
});监听播放器的 "ready" 事件：
var player = videojs('my-player');
player.on('ready', function() {
this.addClass('my-example');
});注意：在每种情况下，回调都是异步调用的。
上述方法的一个重要区别是，使用 on() 为 ready 添加监听器必须在播放器就绪之前完成。而使用 player.ready()，如果播放器已经就绪，则会立即调用该函数。
有关更高级播放器工作流程的讨论，请参阅播放器工作流程指南（https://videojs.com/guides/player-workflows）。
川公网安备51010802032098
