使用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.com/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.com/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.com/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无需计算视频的固有纵横比，并强制使用参数中传递的纵横比。请考虑以下代码片段，以在`

广告
© . All rights reserved.