获取video.js

video.js通过CDN活NPM方式便可正式使用。

video.js的工作模式不仅包含HTML方式的<script>和<link>标签方式，而且可以使用所有主流的bundlers/packagers/builders方式，如Browserify，Node等。

请查阅开始文档了解详情。

创建播放器

注意：video.js可以使用<video>和<audio>标签，但是为了简单起见，我们将只有引用<video>标签。

一旦你使用video.js加载你的页面，你就可以创建一个播放器！

video.js的核心优势在于，它提供了一个标准的<video>标签(https://html.spec.whatwg.org/multipage/media.html#the-video-element)，并且模拟了它的相关时间和API，同时还提供了一套基于dom可定制的UI。

video.js支持<video>元素的所有属性（如controls，preload等），同时拥有自己的选项。有两种方法来创建video.js播放器并传递其选项，但它们都以一个标准的<video>元素开始，属性class="video-js"。

<video class="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>

你可以使用一个<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播放器页面，然后继续本页面的其余部分。

自动化设置

默认情况下，当你的网页完成加载时，Video.js将扫描具有data-setup属性的媒体元素。data-setup属性用于将选项传递给Video.js。一个最小的例子如下:

<video class="video-js" data-setup='{}'>
  <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。

手动设置

在现代网页上，当页面加载完成时<video>元素实际上是不存在的。在这种情况下，进行自动设置是不可能的，但是通过videojs提供的函数手动设置倒是可以。

调用这个函数的一种方法是为它提供一个匹配<video>元素的id属性的字符串：

<video id="my-player" class="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>

videojs('my-player');

然而，通常情况下并不总是接受一个id，也可提供一个Dom元素。

<video class="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>

videojs(document.querySelector('.video-js'));

获取播放器相关信息

一旦播放器被创建，videojs就会在内部持续跟踪。我们通过一些方法可以获取它们的信息。

videojs()

调通videojs()方法，并提供一个已经从在的播放器的id。则会返回这个播放器，而不会创建另一个播放器。

如果没有匹配到这个播放器，那么就会创建一个播放器。

videojs.getPlayer()

有时，您希望获得对播放器的引用，而不是去调用videojs()本身的功能。这种情况可以通过调用videojs.getPlayer()传递匹配元素ID或元素本身的来实现。

videojs.getPlayers()与videojs.players

videojs.players返回所有已知的播放器对象，而videojs.getPlayers则返回相应匹配的播放器对象。

Players是所有播放器的对象，键值与所绑定的ID相同。

注意：由一个没有ID创建的播放器，videojs将会自动给生成一个ID。

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中找到，并且可以直接修改。例如播放器的自定播放{autoplay: true}

videojs.options.autoplay = true;

<video>标签应该注意的属性

许多属性都是布尔类型的。这意味着它们要么打开，要么关闭。在这些情况下，属性应该没有值(或者应该用它的名称作为它的值)，它的存在就意味着这是一个真值，它的不存在的话，意味着一个假值。

<video controls="true" ...>
<video loop="true" ...>
<video controls="false" ...>

注意：controls="false"可能会打开控件，这可能会让新的开发人员有些困惑

这些都是正确的：

<video controls ...>
<video loop="loop" ...>
<video ...>

准备播放器

因为Video.js技术具有异步加载的可能，所以在设置后立即与播放器进行交互并不安全。出于这个原因，Video.js的播放器有一个“准备就绪”的概念，这对于以前使用过jQuery的人来说是很熟悉的。

本质上，可以为Video.js播放器定义任意数量的准备回调。有三种方法可以传递这些回调。在每个例子中，我们将为播放器添加一个相同的类:

将回调函数作为第三个参数传递给videojs()函数:

// Passing `null` for the options argument.
videojs('my-player', null, function() {
  this.addClass('my-example');
});

传递调用播放器的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()，如果播放器已经准备好了，函数将立即被调用。

高级播放器的工作流程

有关更高级的播放器工作流程的讨论，请参阅播放器工作流程指南。