鲁达 video .js是对HTML5 video标签的一个增强，多年来，它的嵌入代码一直只是一个<video>元素。video .js将video标签包装在一个div中，用于放置其他控件和播放器需要的东西。
很长一段时间以来，这些已经足够了。不过在2016年我们添加了“div ingest”，它允许开发者给video.js播放器一个div来使用，而不需要自己制作。这在一定程度上将有助于内容回流优化，也有助于在IOS上，我们的播放器区域重新创建的视频元素时，有时你需要重新创建video标签。然而，<video>标签被div元素所包裹是有点奇怪的。因此，我们构建了<video-js>的全新嵌入方式。
下面详细介绍了这三种嵌入方式。
<video>嵌入
这种类型的嵌入，你可以通过date-setup或者videojs方法初始化它。
<!-- via data-setup --> <video id="vid1" class="video-js" data-setup='{}'> <source src=";> </video> <!-- via code --> <video id="vid1" class="video-js"> <source src=";> </video>const player = videojs('vid1', {});播放器div ingest
增强方式的嵌入，你可以通过date-setup或者videojs方法初始化它。
<!-- via data-setup --> <div data-vjs-player> <video id="vid1" class="video-js" data-setup='{}'> <source src=";> </video> </div> <!-- via code --> <div data-vjs-player> <video id="vid1" class="video-js"> <source src=";> </video> </div>const player = videojs('vid1', {});如你所见，他与传统的<video>嵌入没有太大的不同，但他让React（）更容易使用。
<video-js>嵌入
这是《I Can't Believe It's Not Custom Elements》（）嵌入代码。它看起来非常像<video>的嵌入，但他不是<video>，而是<video-js>的嵌入。这在所有的播放器div ingest都是有用的，它会匹配我们的库名称。
<!-- via data-setup --> <video-js id="vid1" data-setup='{}'> <source src=";> </video-js> <!-- via code --> <video-js id="vid1"> <source src=";> </video-js>const player = videojs('vid1', {});这种方式不再需要手动去添加class="video-js"这个类，如果缺少，就会自动去添加。
自定义标签
根据Can I Use（），本地自定义元素的支持相对较小，因为我们不想包含polyfill，所以我们只使用一个名为video-js的元素，而不是一个完整的自定义元素。
data-setup
这个属性让video.js播放器设置一些自动属性变的非常简单，这是一个HTML属性，它以一个JSON字符串作为播放器选项的值，这个方法使用容易，用于编程更加方便。