embeds(引入)

如何引入Video.js播放器

多年来,Video.js是对HTML5中video元素的增强,其引入代码只是其中的一个<video>元素。然后,Video.js将video元素包装在div中,该div用于我们放置控件以及播放器所需的其他任何东西。
长期以来一直够用。在2016年,添加了“ div ingest”,它允许开发人员为Video.js提供一个供用户使用的div播放器,而不是自己制作。这部分是为了帮助进行内容重排,也为了在iOS方面有所帮助,您有时需要准备视频元素,并在创建播放器div时重新创建视频元素。但是,将<video>元素引入<div>包裹起来有点奇怪。因此,我们建立了一个新的引入,一个<video-js>引入。
下面,详细介绍三种引入。


<video> 引入

经典的Video.js引入。然后可以通过数据设置或videojs方法对其进行初始化。

<!-- via data-setup -->
<video id="vid1" class="video-js" data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video>

<!-- via code -->
<video id="vid1" class="video-js">
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video>
const player = videojs('vid1', {});


Player div ingest

增强的经典嵌入。您也可以通过data-setup或通过videojs方法将其初始化。

<!-- via data-setup -->
<div data-vjs-player>
  <video id="vid1" class="video-js" data-setup='{}'>
    <source src="//vjs.zencdn.net/v/oceans.mp4">
  </video>
</div>

<!-- via code -->
<div data-vjs-player>
  <video id="vid1" class="video-js">
    <source src="//vjs.zencdn.net/v/oceans.mp4">
  </video>
</div>
const player = videojs('vid1', {});

如您所见,它与经典<video>嵌入没有太大区别。它还确实使使用React更容易。


<video-js> embed

我不敢相信它不是自定义元素嵌入代码。它看起来很像<video>引入,但不是video,而是video-js引入。这对于player div ingest所有内容都有用,并且与我们的库名称匹配!

<!-- via data-setup -->
<video-js id="vid1" data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video-js>

<!-- via code -->
<video-js id="vid1">
  <source src="//vjs.zencdn.net/v/oceans.mp4">
</video-js>
const player = videojs('vid1', {});
添加class="video-js"不再是必要的,因为video-js如果缺少该类,它将自动添加该类。


Custom Elements

Native Custom Elements support is relatively small according to Can I Use and because we didn't want to include a polyfill we're going with just an element called video-js rather than a full blown custom element.


data-setup

这是一个易于使用的方法,可以让Video.js自动设置播放器。它是一个HTML属性,它接受播放器选项的JSON字符串表示作为值。使用编程方法可能更好。

上一篇:debugging(调试) 下一篇:event-target(设置事件)