如何使用 Video.js 播放器播放 YouTube 视频?
在本教程中，我们将学习如何使用 video.js 播放器播放 YouTube 视频。Video.js 是一款非常流行的现代网络视频播放器，支持所有最新的视频格式，包括 YouTube、Vimeo 等。
现在，我们将了解如何使用 video.js 库中的"videojs-youtube"软件包播放 YouTube 视频。
为了在 video.js 播放器中播放 YouTube 视频，我们需要在项目中安装"videojs-youtube"软件包。该软件包的安装非常简单，可以使用 Bower 或 Node 软件包管理器完成。
安装 video.js YouTube
使用以下命令通过 npm 安装"videojs-youtube" -
npm install videojs-youtube
如果您使用 Bower 作为软件包管理器，则可以使用以下命令安装"videojs-youtube"
bower install videojs-youtube
在项目的终端中运行上述命令将安装该软件包，然后我们可以通过导入"dist/Youtube.min.js"文件来开始使用它。请参考以下代码片段，该代码片段用于在项目中添加 video.js YouTube 包。
<script src="../dist/Youtube.min.js"></script>
正确设置文件路径，因为这对包的正常工作至关重要。
现在我们已经在项目中添加并导入了该包，让我们学习如何使用它来实际播放 YouTube 视频。
使用 Video.js YouTube 包播放 YouTube 视频
要播放 YouTube 视频，我们需要对 video 元素标签的 data-setup 属性进行一些更改。
首先，我们需要将 data-setup 中的 techOrder 选项设置为"youtube"。其次，我们必须传递源数组，其中包含视频 URL 及其 mime 类型(在 data-setup 中为"video/youtube")作为参数。
请考虑以下将 YouTube 视频添加到视频元素的代码 -
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://www.cainiaomax.com/videos/sample.png" data-setup='{"techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }' >
如您所见，在代码片段中，我们将技术顺序设置为 YouTube，并传递了 sources 数组。
请注意，sources 标签是数组类型，其中包含一个 JSON 对象数组，每个对象都包含我们要播放的视频的类型和 URL。我们可以为多个视频添加多个 JSON 对象。此外，请确保视频类型为"video/youtube"。
注意− 我们已删除 <source> 标签，并将其添加到 data-setup 属性中。
示例 1
包含 video.js YouTube 插件并在视频播放器中播放 YouTube 视频的完整示例如下所示。
<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-big-play-centered" controls preload="auto" fluid="true" poster="https://www.cainiaomax.com/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojsyoutube/2.6.1/Youtube.min.js"></script> var player = videojs('my-video'); </script> </body> </html>
注意 - 请在 <script> 标签中更新 youtube.min.js 文件的正确路径。
执行上述代码将在您的网络浏览器中创建一个视频播放器，播放的视频将是 Tutorialspoint YouTube 视频，其 URL 如下 - https://www.youtube.com/watch?v=xjS6SftYQaQ
您会注意到，我们的视频播放器具有 video.js 默认控件。如果您想更改 YouTube 控件，则需要在数据设置属性中传递一个名为"ytControls"的选项。由于控件在 video.js 中默认为关键字，因此该控件名为"ytControls"。
示例 2
在上述示例中添加 YouTube 控件 -
<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-big-play-centered" controls preload="auto" fluid="true" poster="https://www.cainiaomax.com/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] },"youtube": { "ytControls": 2 }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojsyoutube/2.6.1/Youtube.min.js"></script><script> var player = videojs('my-video'); </script> </body> </html>
执行上述代码后，视频播放器上将显示 YouTube 控件，而不是默认的 video.js 控件。
现在，我们创建了一个播放 YouTube 视频的视频播放器，并将控件更改为 YouTube 控件。您还可以使用"customVars"参数在视频播放器上设置其他参数。
例如，如果我们需要将播放器的窗口模式设置为透明，可以这样做
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }, "youtube": { "ytControls": 2, "customVars": { "wmode": "transparent"} }'
使用"ytControls"和"customVars"的 YouTube 视频播放器的完整工作示例将如下所示。
示例
<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-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" poster="https://www.cainiaomax.com/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }, "youtube": { "ytControls": 2, "customVars": { "wmode": "transparent"} }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
执行上述示例将创建一个包含 YouTube 控件且窗口模式设置为透明的 YouTube 视频播放器。您可以使用 video.js YouTube 包中的任何 video.js 选项。
总结
在本教程中，我们了解了如何使用 video.js 播放 YouTube 视频。首先，我们导入了 video.js YouTube 插件，该插件负责在我们的视频播放器中播放 YouTube 视频。之后，我们通过示例学习如何显示 YouTube 控件，而不是默认的 video.js 控件。
