如何在 HTML5 播放器 Video.JS 中播放 HLS 流?
在本教程中，我们将学习如何使用 video.js 在 HTML5 视频播放器中播放 HLS 流。
HTTP 实时流(也称为 HLS 流)是一种基于 HTTP 的通信协议，使用动态或自适应比特率进行流式传输视频。该协议由 Apple Inc. 于 2009 年开发和发布，各种媒体播放器、网络浏览器、移动设备和流媒体播放器都支持该协议。
HLS 的优势在于它兼容所有联网设备，因此比需要使用专用服务器的流媒体协议更容易采用。另一个优点是 HLS 流可以根据网络限制调整视频质量，而不会干扰播放。因此，在用户观看视频的过程中，视频质量可能会提高或降低。
因此，在视频的下一部分中，我们将尝试在 Web 浏览器中使用 video.js 在视频播放器中使用 HLS 流。
如何在 HTML5 播放器 Video.JS 中播放 HLS 流?
要使用 video.js 在视频播放器中播放 HLS 流，我们首先需要导入所需的包"videojs-contrib-hls"。video.js 的最新版本中已经实现了 video-js contrib hls，我们只需在 <script> 标签中链接它即可将其包含在代码中。
示例
请参考以下代码，在本地项目中添加"videojs-contrib-hls" -
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojscontrib-hls.js"></script>
添加播放 HLS 视频所需的软件包后，我们将 HLS 源及其 MIME 类型添加到 source 标签中。HLS 流文件的扩展名通常为 .m3u8。流的视频 MIME 类型为 "application/x-mpegURL"。
参考以下代码，在 video 元素中添加 HLS 流源 -
<source src="https://www.cainiaomax.com/videos/stream.m3u8" type="application/x-mpegURL" >
示例 1
因此，HLS 流视频播放器的完整示例如下所示 -
<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://www.cainiaomax.com/videos/sample.png" data-setup='{}' > <source src="https://www.cainiaomax.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>
在上面的例子中，您可以注意到我们在 video 元素内的 source 标签中添加了 HLS 流。并且在 <script> 标签中，我们还添加了"videojs-contrib-hls"包，该包负责在 Web 浏览器中播放 HLS 视频流。
执行上述代码后，您将看到一个视频播放器被创建，它可以播放 HLS 流视频文件，并且应用了自定义主题。我们还使用了一些标准 HTML5 和 video.js 特有的视频选项，例如控件、预加载和流畅性。
注意- 请确保在源标签中添加正确的 HLS 流路径。
现在我们已经了解了如何使用 video.js 制作一个基本的 HLS 流视频播放器，让我们看看如何以编程方式制作它，而不是添加源标签。
以编程方式使用 Video.js 创建 HLS 视频播放器
在本教程的这一部分，我们将再次创建一个视频播放器来播放 HLS 流，但这次，我们将使用 video-js 函数来实现相同的功能。
首先，我们将创建一个 video.js 播放器引用，并将其映射到 id 为"my-video"的视频元素。然后，我们将"src"添加到创建的播放器，其中包含 HLS 流的链接及其类型。
使用以下代码创建播放器并添加 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' 的 video 元素。然后，我们使用 "player.src" 方法为播放器添加了 "src" 属性。我们将源路径传递给扩展名为 m3u8 的 HLS 流文件，并将文件类型设置为 "application/x-mpegURL"。
示例 2
在 <script> 中使用 video.js 创建 HLS 视频播放器的完整示例如下 -
<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://www.cainiaomax.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://www.cainiaomax.com/videos/sample720.m3u8', type: 'application/x-mpegURL' }); </script> </body> </html>
执行上述示例后，我们将在浏览器中看到一个视频播放器，它将播放我们的 HLS 视频流。
注意- 不要忘记更新 HLS 流的源路径。
结论
在本教程中，我们了解了如何使用 video.js 在 HTM5 视频播放器中播放 HLS 视频流。我们还通过示例了解了创建 HLS 流视频播放器的各种方法。
