如何使用 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.tw/videos/sample1080p.mp4"
         type="video/mp4"
      >
   </video>
   <!-- Imported Video.js using the CDN URL -->
   <script src="https://tutorialspoint.tw/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.tw/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+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.