数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 Video.js 播放器播放 YouTube 视频？
在本教程中，我们将学习如何使用 video.js 播放器播放 YouTube 视频。Video.js 是一款非常流行的现代 Web 视频播放器，它支持所有最新的视频格式，包括 YouTube、Vimeo 等。
现在，我们将了解如何使用 'videojs-youtube' 包在 video.js 库中播放 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'。其次，我们必须传递 sources 数组，其中包含视频 URL 及其 mime 类型 'video/youtube' 作为 data-setup 参数。
请考虑以下代码，用于将 YouTube 视频添加到 video 元素：
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://tutorialspoint.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://tutorialspoint.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 文件的正确路径。
执行以上代码将在您的 Web 浏览器中创建一个视频播放器，播放的视频将是 Tutorialspoint YouTube 视频，其 URL 为：https://www.youtube.com/watch?v=xjS6SftYQaQ
您会注意到我们的视频播放器具有 video.js 默认控件。如果您想更改 YouTube 控件，则需要在 data-setup 属性中传递另一个选项，称为 'ytControls'。由于 controls 是 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://tutorialspoint.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://tutorialspoint.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 选项与 video.js YouTube 包一起使用。
结论
在本教程中，我们了解了如何使用 video.js 播放 YouTube 视频。首先，我们导入了 video.js YouTube 插件，该插件负责在我们的视频播放器中播放 YouTube 视频。之后，我们借助示例学习了如何显示 YouTube 控件而不是默认的 video.js 控件。
6000+ 次浏览
