使用 Video.js 创建响应式视频播放器\
在本教程中，我们将介绍如何使用 video.js 创建响应式视频播放器。响应式视频播放器可以自动调整大小以适应屏幕尺寸。
通过创建响应式视频播放器，我们可以确保视频播放器的侧面不会被裁剪，并且始终能够完整呈现，无论设备或屏幕尺寸如何。拥有一致的播放器也能提升最终用户的观看体验。
让我们继续阅读本文的下一部分，学习如何使用 video.js 使视频播放器具有响应式功能。
使用 Video.js 创建响应式视频播放器
使用 video.js 库，创建响应式视频播放器或使视频播放器具有响应式功能非常容易。
我们只需要使用 fluid 选项引用视频播放器，video.js 就会自行处理所有事情。我们无需担心不同的屏幕尺寸以及每种尺寸的 CSS。
我们只需要使用 'fluid' 选项引用视频播放器，之后所有事情都将由 video.js 自行处理。我们无需担心不同的屏幕尺寸以及每种尺寸的 CSS。
有多种方法可以添加 'fluid' video.js 选项引用。让我们逐一看一下。
在数据设置中添加"fluid"方法
使用此选项引用的最简单方法是在 <video> 元素内的"datasetup"标签中添加"fluid=true"。
示例
请参考以下创建响应式视频播放器的代码示例。
<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://www.cainiaomax.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>
在上面的例子中，您可以看到，我们使用 <video> 标签和 'video-js' 类创建了一个基本的视频播放器。'data-setup' 标签内添加了 'Fluid=true'。
现在，当您执行上述代码时，视频播放器将具有响应式显示，也就是说，如果您更改屏幕尺寸，视频将根据屏幕尺寸自动调整大小。
使用类
或者，我们也可以使用 '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://www.cainiaomax.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://www.cainiaomax.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 就无需计算视频的固有宽高比，而是强制使用参数中传递的宽高比。请参考下面的代码片段，在 <script> 标签中为视频播放器使用宽高比。
// 使用 videojs 选项中的aspectRatio方法 var player = videojs('my-video', { aspectRatio: '16:9' }); // using the aspectRatio method int the player reference // creating using videojs var player = videojs('vid2'); player.aspectRatio('16:9');
以上代码展示了两种使用 'aspectRatio' 方法的方式。在这两种方式中，video.js 都会使用 16:9 的宽高比，并在所有屏幕尺寸上保持该比例，从而使我们的视频播放器具有响应式显示效果。
示例
请参考以下完整代码示例，了解如何使用 'fluid' 和 'aspectRatio' 方法使我们的视频播放器具有响应式显示效果。
<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='{}' > <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type="video/mp4" > </video> <video id="my-video2" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}' > <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type="video/mp4" > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player1 = videojs('my-video', { fluid: true }); var player2 = videojs('my-video2'); player.aspectRatio('16:9'); </script> </body> </html>
在上面的例子中，我们使用了两个视频元素，id 分别为"my-video"和"myvideo2"。我们使用 video.js 引用将 fluid 和 aspectRatio 方法传递给视频播放器。
执行代码时，您会观察到使用"fluid"方法的视频播放器保持视频的宽高比，而使用 aspectRatio 函数的另一个视频播放器在所有屏幕尺寸上都保持 16:9 的宽高比。
总结
在本教程中，我们了解了如何使用 video.js 创建响应式视频播放器。我们学习了多种使用 fluid 和宽高比来使视频播放器响应的方法，并为每个方法提供了一个示例。
