如何在 HTML5 播放器 Video.JS 中播放 HLS 流？

在本教程中，我们将学习如何使用 video.js 在 HTML5 视频播放器中播放 HLS 流。

HTTP Live Streaming，也称为 HLS 流，是一种基于 HTTP 的通信协议，用于视频流的动态或自适应比特率。该协议由 Apple Inc. 于 2009 年开发和发布，并且各种媒体播放器、网络浏览器、移动设备和流媒体播放器都支持该协议。

HLS 的优点在于它与所有连接互联网的设备兼容，使其比需要使用专业服务器的流媒体协议更容易采用。另一个优点是，HLS 流可以根据网络限制调整视频质量，而不会影响播放。因此，在用户观看视频的过程中，视频质量可能会提高或降低。

因此，在视频的下一部分中，我们将尝试在网络浏览器中使用 video.js 将 HLS 流用于我们的视频播放器。

如何在 HTML5 播放器 Video.JS 中播放 HLS 流？

要在我们的视频播放器中使用 video.js 播放 HLS 流，我们首先需要导入所需的包，即“videojs-contrib-hls”。Video-js contrib hls 已在 video.js 的最新版本中实现，我们只需要通过在 <script> 标签中链接它将其包含在我们的代码中即可。

示例

考虑以下代码，将“'videojs-contrib-hls'' 添加到我们的本地项目中：

<script src="https://unpkg.com/videojs-contrib-hls/dist/videojscontrib-hls.js"></script>

包含播放 HLS 视频所需的包后，让我们在源标签中添加我们的 HLS 源及其 MIME 类型。HLS 流文件通常在文件末尾具有 .m3u8 扩展名。流的视频 MIME 类型为“application/x-mpegURL”。

考虑以下代码，在我们的视频元素中添加 HLS 流源：

<source src="https://tutorialspoint.com/videos/stream.m3u8" type="application/x-mpegURL" >

示例 1

因此，HLS 流视频播放器的完整示例如下所示：

Open Compiler
<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 vjs-big-play-centered vjs-theme-sea"
      controls
      preload="auto"
      fluid="true"
      poster="https://tutorialspoint.com/videos/sample.png"
      data-setup='{}'
      >
      <source src="https://tutorialspoint.com/videos/sample720.m3u8" type="application/x-mpegURL">
   </video>

   <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
   <script src="https://unpkg.com/videojs-contribhls/dist/videojs-contrib-hls.js"></script>

   <script>
   var player = videojs('my-video');
   </script>

</body>
</html>

在上面的示例中，您可以注意到我们在视频元素内的源标签中添加了我们的 HLS 流。在 <script> 标签中，我们还包含了包“videojs-contrib-hls”，它负责在网络浏览器中播放我们的 HLS 视频流。

执行上述代码后，您会看到创建了一个视频播放器，该播放器播放 HLS 流视频文件并应用了自定义主题。我们还使用了一些标准的 HTML5 和一些 video.js 特定的视频选项，如 controls、preload 和 fluid。

注意 - 请确保在源标签中添加了 HLS 流的正确路径。

现在我们已经了解了如何使用 video.js 创建基本的 HLS 流视频播放器，让我们看看如何以编程方式创建它，而不是添加源标签。

使用 Video.js 以编程方式创建 HLS 视频播放器

在本教程的这一部分中，我们将再次创建一个视频播放器来播放 HLS 流，但这次我们将使用 video-js 函数来实现。

首先，我们将创建一个 video.js 播放器引用，并将其映射到 ID 为“my-video”的视频元素。然后，我们将使用 HLS 流的链接及其类型将“src”添加到创建的播放器中。

使用以下代码创建播放器并添加 HLS 视频流源：

<script>
   var player = videojs('my-video');
   player.src({
      src: 'path/to/my/stream.m3u8',
      type: 'application/x-mpegURL'
   });
</script>

在上面的代码片段中，我们使用 video-js 函数创建了一个指向 ID 为“my-video”的视频元素的视频播放器引用。然后，我们使用“player.src”方法向播放器添加了“src”属性。我们将源路径传递到扩展名为 m3u8 的 HLS 流文件，然后我们将文件的类型设置为“application/x-mpegURL”。

示例 2

使用 video.js 在 <script> 中创建 HLS 视频播放器的完整工作示例如下所示：

Open Compiler
<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 vjs-big-play-centered vjs-theme-sea"
      controls
      preload="auto"
      fluid="true"
      poster="https://tutorialspoint.com/videos/sample.png"
      data-setup='{}'
   >
   </video>
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js">
   </script>
   <script src="https://unpkg.com/videojs-contribhls/dist/videojs-contrib-hls.js"></script>
   <script>
      var player = videojs('my-video');
      player.src({
         src: 'https://tutorialspoint.com/videos/sample720.m3u8',
         type: 'application/x-mpegURL'
      });
   </script>
</body>
</html>

执行上述示例后，我们将在浏览器中看到一个视频播放器，它将播放我们的 HLS 视频流。

注意 - 不要忘记更新 HLS 流的源路径。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

结论

在本教程中，我们了解了如何使用 video.js 在 HTM5 视频播放器中播放 HLS 视频流。我们还通过示例了解了创建 HLS 流视频播放器的各种方法。

更新于： 2023年4月4日

16K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告