使用 video.js 設定全屏影片背景

Video.js 是一個功能強大的工具，用於處理網路上的影片，它為不同型別的影片播放器（包括 HTML5、Flash 等）提供了一個通用的介面。它設計易於使用和定製，並提供廣泛的選項來控制播放器的外觀和感覺。

在本教程中，我們將演示如何使用這個名為 video.js 的開源 JavaScript 庫設定全屏影片背景。

在本教程中，我們將重點介紹如何使用 video.js 設定全屏影片背景。這是一種為您的網站新增視覺趣味和參與感的好方法，無論您是使用影片作為主頁的背景，還是將其整合到網站的其他頁面中。如果您希望創造一種動態且引人入勝的使用者體驗，此功能尤其有用，並且藉助 video.js 可以相對輕鬆地實現。因此，讓我們繼續本教程的下一部分，瞭解如何使用 video.js 為影片播放器設定全屏影片背景。

使用 video.js 設定全屏影片背景

設定全屏影片背景是指將影片設定為整個網頁的背景，而不是頁面內一個小嵌入式播放器的過程。這意味著影片佔據整個瀏覽器視窗，並且可以在網頁內容後面看到。此技術可用於建立動態且引人入勝的使用者體驗，並且對於吸引使用者注意力的主頁或登陸頁面尤其有用。

**先決條件** - 假設您知道如何使用 video.js 庫建立一個基本的影片播放器，讓我們學習如何增加 video.js 播放器的緩衝區大小或時間。

為了設定全屏影片背景，我們將更改影片元素以及 video.js 類的 CSS 屬性。

考慮以下用於設定全屏影片背景的 CSS 程式碼：

<style>
   body {
      margin: 0;
      padding: 0;
      }

   .video-js {
      width: 100%;
      height: 100%;
   }

   #my-video-player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
</style>

示例中的 CSS 程式碼用於設定影片元素的樣式並使其填充整個網頁背景。以下是 CSS 程式碼各個部分的解釋：

**body { margin: 0; padding: 0; }** - 將 body 元素的邊距和填充設定為 0，以便頁面邊緣和影片背景之間沒有空間。

**video-js { width: 100%; height: 100%; }** - 這將影片元素的寬度和高度設定為父容器的 100%。因此它將佔據全屏。

**#my-video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }** - 這將 id 為“my-video-player”的影片元素設定樣式，並將其定位在頁面的左上角，佔據頁面的整個空間。object-fit: cover 屬性確保影片按比例縮放以填充整個背景，同時保持其縱橫比並裁剪背景中不適合的影片部分。

更改這三個類的 CSS 屬性將確保我們的影片播放器佔據瀏覽器視窗的整個背景。

示例

在完整的示例中使用上述程式碼片段來使用 video.js 設定全屏影片背景將如下所示：

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Setting up Full Video Background </title>

   <!-- Importing Video.js CSS / JS using CDN URL -->
   <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>

   <style>
      body {
         margin: 0;
         padding: 0;
      }

      .video-js {
         width: 100%;
         height: 100%;
      }

      #my-video-player {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
   </style>
</head>
<body>
   <video
      id="my-video-player"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls="true"
      preload="true"
      muted="true"
      autoplay="true"
      poster="assets/sample.png"
      data-setup='{}'
   >
   <source
      src=" https://tutorialspoint.tw/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
      // Initializing the video player with video options
      let player = videojs('my-video-player');
   </script>
</body>
</html>

在上面提供的程式碼片段中，我們嘗試實現以下內容：

首先，我們使用 video.js 的免費 CDN URL 在程式碼的部分匯入所需的 video.js CSS 和 JS 檔案。
此外，我們在程式碼的部分建立了一個
影片元素的“id”（即“my-video-player”）隨後在程式碼的

廣告