如何在 Video.js 播放器中设置不同的视频质量?
在本教程中，我们将了解如何在 video.js 播放器中设置不同的视频质量。设置不同的视频质量意味着我们使用 video.js 创建的视频播放器将为同一视频提供多种分辨率，最终用户可以根据自己的喜好或带宽切换分辨率。
但是，video.js 本身并不支持此功能，这意味着我们必须使用插件(因为 video.js 拥有丰富的插件和支持)来为视频播放器设置多种视频分辨率。
我们将要使用的 video.js 插件是一款免费且非常流行的插件，它允许您在 video.js 播放器中添加选择视频质量的功能。该插件的名称是"Video.js 分辨率切换器"。
现在让我们学习如何使用此插件为我们的视频播放器添加视频分辨率支持。
Video.js 分辨率切换器
顾名思义，Video.js 分辨率切换器提供了在各种视频分辨率之间切换的功能。
Video.js 分辨率切换器可以使用 npm 和 bower 安装。使用以下命令通过 Node 包管理器安装插件 -
npm i videojs-resolution-switcher —save-dev
如果您使用的是 Bower 包管理器，则可以使用以下命令安装 Video.js Resolution Switcher -
注意- 确保这些命令在项目目录中执行。
由于我们已经安装了"bower install videojs resolution switcher"插件，因此我们需要将其添加到我们的项目中。
请参考以下代码片段，将下载的插件合并到我们的本地项目中 -
<script src="videojs-resolution-switcher.js"></script>
在这里，我们在 <script> 标签的 'src' 属性中添加了 videojs-resolution-switcher.js 的路径。这将确保该插件已包含在我们的项目中。
既然我们已经将插件添加到项目中，我们就可以开始使用它来为我们的视频播放器添加多种分辨率了。使用此插件，有两种方法可以为视频播放器设置不同的视频质量。
第一种方法也更简单一些，即使用多个 <source> 标签，而第二种方法是动态设置视频分辨率。我们将通过示例来分别介绍这两种方法。
方法 1 - 使用 <source> 标签
在这个方法中，我们将在 <video> 中包含多个 <source> 标签。元素包含不同的视频文件，并且每个源都有不同的标签。
示例
请参考下面给出的相同示例 -
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video class="video-js vjs-default-skin" id="my-video" width="560" data-setup='{}' controls="true" autoplay="true" muted preload="auto" > <source src="https://www.cainiaomax.com/videos/sample480.mp4" type='video/mp4' label='SD' res='480' id="my-video1"/> <source src="https://www.cainiaomax.com/videos/sample640.mp4" type='video/mp4' label='640p' res='640' id="my-video2"/> <source src="https://www.cainiaomax.com/videos/sample720.mp4" type='video/mp4' label='720p' res='720' id="my-video3"/> <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type='video/mp4' label='HD' res='1080' id="my-video4"/> </video> <script src="videojs-resolution-switcher.js"></script> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> </script> <script> videojs('video').videoJsResolutionSwitcher(); </script> </body> </html>
在上面的代码中，我们完成了以下操作:
在 <script> 标签中添加了"videojs-resolution-switcher"，以便将其包含到我们的项目中。
我们还使用 videoJsResolutionSwitcher() 方法初始化了 video.js 播放器。
此外，我们在 <video> 元素中使用了四个不同的 <source> 标签。每个 <source> 元素都对应不同分辨率的不同视频。<source> 标签中的第一个视频具有低清晰度 (SD) 画质，而第二个视频具有 640p 画质。同样，第三个视频的分辨率为 720p，最后一个视频的分辨率为 1080p。
在 <source> 标签中添加所有所需的视频分辨率后，我们还为每个分辨率添加了一个标签。最终用户将看到并点击此标签来更改视频分辨率。
这是一个相当简单的方法，可以在视频播放器中包含多个视频并设置不同的分辨率。现在，让我们看看如何动态实现相同的功能。
方法 2 - 动态设置 <sources>
在本教程的这一部分，我们将了解如何使用 Video.js 分辨率切换器插件在 video.js 播放器中动态设置不同的视频质量。
在这里，我们将只更改 <script> 中的视频源。标签使用 Video.js 分辨率切换器插件提供的各种方法。
示例
请考虑以下使用"updateSrc"方法更改视频质量的代码。
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <video class="video-js vjs-default-skin" id="my-video" width="560" data-setup='{}' controls="true" autoplay="true" muted preload="auto" > </video> <script src="videojs-resolution-switcher.js"></script> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> </script> <script> videojs('my-video', { controls: true, plugins: { videoJsResolutionSwitcher: { default: 'high', dynamicLabel: true } } }, function () { // Add dynamically sources via updateSrc method player.updateSrc([ { src: 'https://www.cainiaomax.com/videos/sample480.mp4', type: 'video/mp4', label: '480' }, { src: 'https://www.cainiaomax.com/videos/sample640.mp4', type: 'video/mp4', label: '640' }, { src: 'https://www.cainiaomax.com/videos/sample720.mp4', type: 'video/mp4', label: '720' }, { src: 'https://www.cainiaomax.com/videos/sample1080p.mp4', type: 'video/mp4', label: '1080' } ]) }) </script> </body> </html>
在上面的代码中，我们从 <video> 元素中删除了所有 <source> 标签。然后，在 <script> 标签中初始化一个 video.js 播放器，并使用 videoJsResolutionSwitcher 作为插件。
videoJsResolutionSwitcher 插件有一个"default"属性，该属性将视频播放器的默认分辨率设置为高。另一个属性"dynamicLabel: true"用于动态加载视频。
在代码的后面，播放器使用了"updateSrc"方法，动态添加了 4 个视频源，每个源都有各自的视频路径、标签和类型。 'updateSrc' 是 videoJsResolutionSwitcher 插件提供的一个方法，它会加载所有视频源，从而在我们的视频播放器上显示多种视频分辨率。
以上就是使用 video.js 分辨率切换插件在我们用 video.js 创建的视频播放器中设置多种视频分辨率的两种方法。
总结
在本教程中，我们了解了如何使用 video.js 在视频播放器中设置不同的分辨率。我们使用了一个名为"videoJsResolutionSwitcher"的插件在视频播放器中设置了多个不同分辨率的视频文件。之后，我们借助示例了解了使用该插件的两种方法。
