如何在 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.tw/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://tutorialspoint.tw/videos/sample.png"
      data-setup='{}'
      >
      <source src="https://tutorialspoint.tw/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 影片播放器的完整工作示例如下所示：

<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.tw/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.tw/videos/sample720.m3u8',
         type: 'application/x-mpegURL'
      });
   </script>
</body>
</html>

執行上述示例後，我們將在瀏覽器中看到一個影片播放器，它將播放我們的 HLS 影片流。

注意 - 不要忘記更新 HLS 流的源路徑。

結論

在本教程中，我們瞭解瞭如何使用 video.js 在 HTM5 影片播放器中播放 HLS 影片流。我們還透過示例瞭解了建立 HLS 流影片播放器的各種方法。

更新於： 2023年4月4日

16K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告