Video.js 旨在增强 HTML5 中的 video 元素，多年来，其嵌入代码一直只是一个 <video> 元素。Video.js 随后将 video 元素包裹在一个 div 中，该 div 用于放置控件和播放器所需的任何其他内容。

长期以来，这已经足够了。2016 年，“div 导入”功能被添加进来，它允许开发者为 Video.js 提供一个播放器 div 来使用，而不是让 Video.js 自己创建。这部分是为了帮助解决内容回流问题，也是为了帮助 iOS，在 iOS 上有时需要预处理 video 元素，而我们在创建播放器 div 时会重新创建 video 元素。然而，让一个 <video> 元素嵌入在一个 <div> 中有点奇怪。因此，我们开发了一种新的嵌入方式，即 <video-js> 嵌入。

下面将详细介绍这三种嵌入方式。

嵌入方式

<video> 嵌入

经典的 Video.js 嵌入方式。您可以通过 data-setup 或 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', {});

播放器 div 导入

增强的经典嵌入方式。您也可以通过 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> 嵌入

这是 难以置信它不是自定义元素（I Can't Believe It's Not Custom Elements） 的嵌入代码。它看起来与 <video> 嵌入非常相似，但它不是 video 嵌入，而是 video-js 嵌入。这对于播放器 div 导入有用的所有功能都很有用，并且它与我们的库名称相匹配！

<!-- 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 类。

自定义元素

根据 Can I Use 的数据，原生自定义元素支持相对较少，而且我们不想包含 polyfill，所以我们选择只使用一个名为 video-js 的元素，而不是一个完整的自定义元素。

data-setup

这是一种易于使用的自动设置 Video.js 播放器的方法。它是一个 HTML 属性，其值是 播放器选项 的 JSON 字符串表示。使用编程方式可能更可取。