使用Video.js建立響應式影片播放器

在本教程中，我們將學習如何使用video.js建立一個響應式影片播放器。響應式影片播放器能夠根據螢幕大小調整自身尺寸。

透過建立響應式影片播放器，我們可以確保影片播放器不會被裁剪，無論裝置或螢幕尺寸如何，都能完整顯示。一致的播放器也能提升終端使用者的觀看體驗。

讓我們繼續本文的下一部分，學習如何使用video.js使影片播放器響應式。

使用Video.js建立響應式影片播放器

使用video.js庫，建立響應式影片播放器或使影片播放器響應式非常容易。

我們只需要將fluid選項引用到影片播放器，video.js就會自行處理所有事情。我們無需擔心不同的螢幕尺寸和每個螢幕尺寸的CSS。

我們只需要利用'fluid'選項引用影片播放器，之後video.js會自行處理所有事情。我們無需擔心各種螢幕尺寸和每個螢幕尺寸的CSS。

新增'fluid' video.js選項引用有多種方法。讓我們逐一瞭解每種方法。

在資料設定中新增'fluid'方法

使用此選項引用的最簡單方法是在`

示例

請考慮以下建立響應式影片播放器的程式碼示例。

<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-default-skin"
      controls
      preload="auto"
      data-setup='{ "fluid" : true }'
   >
      <source
         src="https://tutorialspoint.tw/videos/sample1080p.mp4"
         type="video/mp4"
      >
   </video>
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
   <script>
      var player = videojs('my-video')
   </script>
</body>
</html>

在上面的示例中，您可以看到，我們使用`

現在，當您執行上述程式碼時，影片播放器將具有響應性，即，如果您更改螢幕大小，影片將根據螢幕自行調整大小。

使用類

或者，我們也可以使用類'vjs-fluid'，而不是在'data-setup'屬性中使用'fluid=true'。

'vjs-fluid'將使影片流暢，並將等待頁面完全載入以計算影片的縱橫比。然後在螢幕上保持該縱橫比。

請考慮以下使用vjs-fluid類的程式碼。

class="video-js vjs-fluid"

或者，如果您知道影片的縱橫比，或者希望影片具有特定的縱橫比，那麼video.js有一些預定義的縱橫比類，如'vjs-16-9'、'vjs-4-3'、'vjs-9-16'和'vjs-1-1'。

如果我們使用上述任何類，video.js將為我們的影片播放器在不同的螢幕和顯示尺寸上保持指定的縱橫比。

class="video-js vjs-16-9"

如果我們使用上面的程式碼片段，我們的影片播放器將保持12:9的縱橫比，同時保持響應性。

示例

請考慮完整的HTML示例，該示例使用“vjs-fluid”和“vjs-16-9”方法使影片播放器響應式。

<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-default-skin vjs-fluid"
      controls
      preload="auto"
      data-setup='{}'
   >
      <source
         src="https://tutorialspoint.tw/videos/sample1080p.mp4"
         type="video/mp4"
      >
   </video>
   <video
      id="my-video2"
      class="video-js vjs-default-skin vjs-16-9"
      controls
      preload="auto"
      data-setup='{}'
   >
      <source
         src="https://tutorialspoint.tw/videos/sample1080p.mp4"
         type="video/mp4"
      >
   </video>
   <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
   <script>
      var player = videojs('my-video')
   </script>
</body>
</html>

在上面的示例中，我們使用了兩個影片元素，一個使用'vjs-fluid'方法，另一個使用'vjs-16-9'縱橫比方法。

執行程式碼時，您會注意到'vjs-fluid'保持影片的縱橫比，而'vjs-16-9'在所有螢幕尺寸下保持16:9的縱橫比。

使用播放器方法

如果由於某種原因，您不想使用上述兩種方法，您可以使用這種完全在程式碼的JavaScript部分完成的方法。

您也可以在javascript程式碼中的播放器方法選項中啟用`fluid: "true"`。請考慮以下程式碼。

// using the fluid method in the videojs options
var player = videojs('my-video', {
   fluid: true
});
// using the fluid method to the player reference
// creating using videojs
var player = videojs('my-video2');
player.fluid(true);

在上面的程式碼片段中，顯示了在JavaScript中使用'fluid'方法的兩種方式。兩種方式都執行完全相同的操作，即透過計算影片的固有縱橫比並在不同的螢幕尺寸下保持該縱橫比來使影片播放器響應式。

或者，您也可以在此處使用縱橫比，以便video.js無需計算影片的固有縱橫比，並強制使用引數中傳遞的縱橫比。請考慮以下程式碼片段，以在`

廣告