如何使用 Video.js 播放器播放 .mp4 文件？

在本教程中，我们将学习如何使用 video.js 播放器库播放 mp4 文件。

Video.js 是一款非常流行且现代的网络视频播放器，其开发理念以 HTML5 为中心。它支持多种视频播放格式，如 mp4、webm、flv 等，以及其他现代视频格式，如 YouTube、Vimeo 和 Flash。Video.js 还确保视频播放器在所有显示尺寸（如台式机、电脑和手机）上保持一致。

在本教程中，我们将重点关注如何为我们的 mp4 视频文件创建视频播放器，以及如何使用 video.js 实现这一目标。

如何使用 Video.js 播放器播放 .mp4 文件？

在本教程的这一部分，让我们创建一个视频播放器来播放 mp4 视频文件。使用 video.js，播放 mp4 视频文件变得非常容易。我们只需使用 video-js 创建一个视频元素，并在源标签中添加我们的视频，并使用正确的视频类型即可。

创建视频播放器主要有两种方法：

  • 使用带有 'video-js' 类的 <video> 标签创建视频元素

  • 使用 <video-js> 标签创建视频元素

让我们分别看看每种方法。

使用带有 'video-js' 类的 <video> 标签

示例

请查看以下示例：

<html>
<head>
   <!-- Imported Video.js CSS using the URL -->
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
</head>
<body>
   <video
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="560"
      height="300"
      data-setup='{}'
   >
      <source
         src="https://tutorialspoint.com/videos/sample1080p.mp4"
         type="video/mp4"
      >
   </video>
   <!-- Imported Video.js using the CDN URL -->
   <script src="https://tutorialspoint.com/videos/video1.mp4"></script>
</body>
</html>

在上面的示例中，您可以看到我们执行了以下操作：

  • 使用 CDN URL 在 <script> 标签中导入 "video.js"，并在 <link> 标签中导入 video-js.css（位于头部部分）。

  • 创建了一个 <video> 元素，其类名为 "video-js"，id 为 "myvideo"。我们还使用了一些标准的 HTML 视频属性，如 controls、preload、height、width 等，以及一些 video-js 特定的属性，如 'datasetup'。

  • 在视频元素内部，是我们的 <source> 标签，其中包含了 mp4 视频文件的路径，并且 <source> 标签上的 mime 类型属性已设置为 video/mp4。添加 "video/mp4" 类型非常重要，因为它将告诉视频播放器我们的视频类型为 mp4。

在浏览器中执行上述代码后，将创建一个带有 video-js 默认皮肤的视频播放器，它将播放我们包含在源路径中的 mp4 视频文件。

现在，我们已经使用 <video> 标签创建了一个 video.js 播放器来播放我们的 mp4 文件，让我们也看看 <video-js> 标签。

使用 <video-js> 标签

或者，您可以使用 <video-js> 标签，而不是使用 <video> 标签并将其类设置为 "video-js"。

示例

请考虑以下代码示例，该示例使用 <video-js> 标签创建 mp4 视频播放器。

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

在上面的示例中，您会注意到代码与之前的示例几乎相同。这里，我们同样使用 CDN URL 在 <script> 标签中导入 video.js，并在头部部分的 <link> 标签中导入 video.js CSS。

之后，为了创建视频元素，我们用 <video-js> 标签替换了 <video> 标签，并且还从视频元素中删除了 'video-js' 类。然后，再次将一些标准的 HTML5 属性（如 controls、height、width 等）设置到视频元素上。

此外，请注意我们如何在 <source> 标签中设置 mp4 视频的路径，以及将 mime 类型设置为 'video/mp4'。设置源标签的类型非常重要，因为它会向 video-js 更新我们的视频文件类型。

但是，当您在浏览器中执行此示例时，您会注意到它与上一个示例完全相同，两者之间没有明显的区别。此示例也将创建一个视频播放器，该播放器将使用 video 默认皮肤播放我们的 mp4 视频文件。

因此，我们可以使用上面解释的任何一种方法，因为它不会改变任何内容。这只是使用 video.js 库创建视频播放器以播放我们的 mp4 视频文件的两种方法。

注意 - 要运行上述代码，您需要使用 mp4 视频文件的路径更新 <source> 标签内的 "src" 值。

结论

在本教程中，我们学习了如何使用 video.js 库创建视频播放器来播放我们的 mp4 视频文件。我们首先了解了如何在一些示例的帮助下使用带有 "videojs" 类的 <video> 元素，然后我们查看了另一种创建视频播放器以播放 mp4 视频文件的方法，即使用 <video-js> 标签。

更新于：2022年11月8日

4K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告