如何使用 Video.js 播放器播放 Vimeo 文件?
在本文中，我们将学习如何使用 video.js 播放器播放 Vimeo 视频文件。Video.js 是一款易于使用且非常流行的现代视频播放器，它支持所有最新的视频格式，包括 Vimeo、YouTube 等，并可在台式机、笔记本电脑等各种平台上播放。
现在，让我们专注于创建一个可以播放 Vimeo 文件的视频播放器，使用"videojs-vimeo"软件包。这个软件包可以帮助我们轻松播放 Vimeo 视频文件。
如何使用 Video.js 播放器播放 Vimeo 文件?
为了在 video.js 播放器中播放 Vimeo 视频，我们需要在项目中安装一个名为"videojs-vimeo"的软件包。该软件包的安装非常简单，可以使用 yarn 或 node 软件包管理器完成。
安装 video.js Vimeo 软件包
请参考以下命令，使用 npm 安装 videojs-vimeo -
npm install @devmobiliza/videojs-vimeo
如果您使用 yarn 作为软件包管理器，则可以使用以下命令安装该软件包
yarn add @devmobiliza/videojs-vimeo
您只需在项目目录的终端中执行上述命令即可安装该软件包。现在，为了在我们的代码中使用它，我们需要在 <script> 标签中添加该软件包 dist 文件的路径。使用以下代码片段添加 video.js Vimeo 包。
<script src="videojs-vimeo/dist/videojs-vimeo.js"></script>
请确保正确更新包的路径，以便将 video.js-vimeo 添加到您的项目中。
由于我们已经在项目中包含了 vimeo 包，让我们使用它来创建视频播放器
。使用 Video.js Vimeo 包播放 Vimeo 视频 -
为了在我们的 video.js 播放器中播放 vimeo 视频，我们需要创建一个简单的播放器，并在数据设置属性中传递一些选项。我们需要在"data-setup"中传递的视频选项如下:-
将 data-setup 中的 techOrder 选项设置为 vimeo。
传递 sources 数组，其中包含视频 URL 及其 mime 类型，在 data-setup 中将其设置为"video/vimeo"作为参数。
参考以下代码，添加一个包含 vimeo 视频文件的视频元素:-
HTML 代码
<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/my_video_poster.jpg" data-setup='{"techOrder": ["vimeo"], "sources": [{ "type":"video/vimeo", "src": "https://www.vimeo.com/380886323"}] }' >
正如您所见，在代码片段中，我们将技术顺序设置为 vimeo，并传递了包含 HTML 视频 URL 的 sources 数组。请注意，sources 标签包含一个 JSON 对象数组，每个对象都包含我们要播放的视频的类型和 URL。我们可以为多个视频添加多个 JSON 对象。此外，请确保添加的视频类型为"video/vimeo"。
注意 - 我们删除了用于在 <video> 元素中添加视频文件的 <source> 标签。相反，我们在数据设置选项中添加了 sources 数组。
因此，包含 video.js vimeo 插件并在视频播放器中播放 vimeo 视频文件的完整示例如下所示。
示例
<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-default-skin" controls preload="auto" fluid="true" poster="https://www.cainiaomax.com/videos/my_video_poster.jpg" data-setup='{"techOrder": ["vimeo"], "sources": [{ "type":"video/vimeo", "src": "https://www.vimeo.com/380886323"}] }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="videojs-vimeo/dist/videojs-vimeo.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
注意 - 请在 <script> 标签的 src 属性中更新 videojs-vimeo.js 文件的正确路径。
执行上述代码将在您的网络浏览器中创建一个视频播放器，正在播放的视频将是 HTML vimeo 视频，其 URL 如下:https://www.vimeo.com/380886323
现在，我们已经创建了一个播放 vimeo 视频的视频播放器，我们还可以在 vimeo 视频播放器上设置其他参数，例如颜色、质量、循环播放、自动播放、静音等。
例如，如果我们需要将播放器的颜色更改为红色并循环播放视频，我们可以这样做
data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://www.vimeo.com/380886323"}] }, "vimeo": { "color": "#ff0000", "loop": "true" }'
使用颜色为红色且视频循环设置为 true 的 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-default-skin" controls preload="auto" fluid="true" poster="https://www.cainiaomax.com/videos/my_video_poster.jpg" data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://www.vimeo.com/380886323"}] }, "vimeo": { "color": "#ff0000", "loop": "true" }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="videojs-vimeo/dist/videojs-vimeo.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
执行上述示例将创建一个可改变颜色的 Vimeo 视频播放器，视频将循环播放。或者，您可以使用 video.js vimeo 包中的任何 video.js 选项。
总结
在本文中，我们了解了如何使用 video.js 播放 Vimeo 视频。首先，我们导入了 video.js vimeo 插件，该插件负责在我们的视频播放器中播放 Vimeo 视频。然后，我们通过示例学习了如何更改视频播放器的颜色并循环播放视频。
