如何使用 JavaScript 设置 Video.js？

在本教程中，我们将学习如何使用 JavaScript 设置 video.js。我们还将查看一些示例以更好地理解。

首先，Video.js 是一款非常流行且易于使用的现代 Web 视频播放器，它构建在 HTML5 之上，并为 Web 视频播放器提供了更好的功能和特性。它支持各种视频播放格式 - 标准 HTML5 格式和现代格式，如 Youtube、Vimeo 和 Flash。最重要的是 - 它几乎适用于所有显示尺寸，例如桌面电脑、手机等。

现在，让我们看看如何使用 javascript 在您的项目中设置 Video.js。

安装 Video.js

Video.js 可通过 CDN 和 **npm**（节点包管理器）正式使用。我们将查看每种方法。

通过 CDN 安装

在本地项目中包含 video.js 最方便的方法是使用免费的 CDN URL。

使用以下 CDN URL 包含 Video.js -

<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />

以上代码从 `` 标签中包含的 CDN URL 获取 video.js。现在让我们继续使用节点包管理器安装 video.js。

通过 NPM 安装

要在您的项目中使用节点包管理器安装 video.js，请在项目目录中使用以下命令 -

npm install --save-dev video.js

此命令将安装最新版本的 video.js，并将其保存为 "package.json" 中的依赖项。

现在我们已经了解了两种安装视频的方法，让我们在本文的下一节中学习如何在文章中使用 video.js。

创建播放器

Video.js 的一个关键优势在于，它可以装饰传统的 `

Video.js 支持标准的 `

现在，我们将创建一个视频播放器，使用 `

示例

考虑以下所示的 HTML 代码。


<!DOCTYPE html>
<html>
   <head>
      <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
   </head>
   <body>
      <video id="my-video" class="video-js" controls preload="auto"width="640" height="264" data-setup='{}'>
      <source src="https://tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" />
   </video>
   
   <script
      src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
   </body>
</html>

在上面的示例中，您可以观察到 -

我们正在使用 `` 标签和 `

广告