setup(安装)

Video.js设置


Getting Video.js

Video.js可以通过CDN和npm正式获得。

Video.js不仅可以使用HTML <script>和<link>标签,还可以使用所有主要的打包器/打包器/构建器(例如Browserify,Node,WebPack等)开箱即用。

有关详细信息,请参阅入门文档。


Creating a Player

注意: Video.js可与<video> 和 <audio>元素一起使用,但为简单起见,我们将仅提及<video>元素。

在页面上加载 Video.js之后,就可以创建播放器了!

Video.js的核心优势在于,它装饰了一个标准<video>元素并模拟了其关联的事件和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>
有关所有各种嵌入选项的高级概述,请查看embeds页面,然后按照此页面的其余部分进行操作。


Automatic Setup

默认情况下,当您的网页完成加载时,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。


Manual Setup

在现代网络上,<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属性并不总是可行的。因此,该videojs函数改为接受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'));


Getting References to Players

创建播放器后,Video.js会在内部对其进行跟踪。有几种方法可以获取对已有播放器的引用。

Using videojs

使用已存在播放器的元素ID调用videojs()将返回该播放器,而不会创建另一个播放器。

如果没有播放器匹配该参数,它将尝试创建一个。

Using videojs.getPlayer()

有时,您希望获得有关播放器的参考,而不会产生潜在的副作用videojs()。可以通过videojs.getPlayer()使用与元素ID匹配的字符串或与元素本身匹配的字符串来实现。

Using videojs.getPlayers() or videojs.players

该videojs.players属性将公开所有已知播放器。该方法videojs.getPlayers()仅返回相同的对象。

播放器使用与其ID匹配的键存储在此对象上。

注意:从没有ID的元素创建的播放器将被分配一个自动生成的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属性来触发播放器设置,则可以将播放器选项的对象作为该videojs函数的第二个参数传递:
videojs('my-player', {
  controls: true,
  autoplay: false,
  preload: 'auto'
});
注意:不要同时使用data-setup和选项对象。


Global Defaults

所有播放器的默认选项都可以在videojs.options中找到并修改。例如,为下例中播放器设置{autoplay: true}:

videojs.options.autoplay = true;


A Note on <video> Tag Attributes

许多属性是所谓的布尔属性。这意味着它们是打开还是关闭。在这些情况下,该属性应该没有值(或应以其名称作为其值)-它的存在表示一个真值,而它的不存在表示一个假值。

这些是不正确的:

<video controls="true" ...>
<video loop="true" ...>
<video controls="false" ...>
注意:controls="false"的例子可能会让新开发人员感到困惑——它实际上会打开控件!

这些是正确的:

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


Player Readiness

由于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(),如果播放器已经准备好了,就会立即调用该函数。


Advanced Player Workflows

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

上一篇:react 下一篇:skins(皮肤)