数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Video.js 播放器播放 Vimeo 文件？
在本文中，我们将学习如何使用 video.js 播放器播放 Vimeo 视频文件。Video.js 是一款易于使用且非常流行的现代视频播放器，它支持所有最新的视频格式，包括 Vimeo、youtube 等，并可在各种平台（如台式机、笔记本电脑等）上使用。
现在，让我们专注于创建一个能够播放 Vimeo 文件的视频播放器，方法是使用“videojs-vimeo”包。此包将帮助我们轻松播放 Vimeo 视频文件。
如何使用 Video.js 播放器播放 Vimeo 文件？
为了在 video.js 播放器中播放 Vimeo 视频，我们需要在项目中安装一个名为“videojs-vimeo”的包。安装该包非常简单，可以使用 yarn 或节点包管理器来完成。
安装 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”中传递的视频选项如下：
在 data-setup 中将 techOrder 选项设置为 vimeo。
将 sources 数组传递给 data-setup 作为参数，其中包含视频 URL 及其 MIME 类型“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://tutorialspoint.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”。
注意：我们已删除了 <source> 标签，该标签用于在 <video> 元素中添加视频文件。相反，我们在 data-setup 选项中添加了 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://tutorialspoint.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 文件的正确路径。
执行上述代码将在您的 Web 浏览器中创建一个视频播放器，并且播放的视频将是具有以下 URL 的 HTML vimeo 视频：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 视频播放器的完整工作示例如下所示。
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
示例
<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://tutorialspoint.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 选项与 video.js vimeo 包一起使用。
结论
在本文中，我们了解了如何使用 video.js 播放 vimeo 视频。首先，我们导入了 video.js vimeo 插件，该插件负责在我们的视频播放器中播放 vimeo 视频。之后，我们学习了如何更改视频播放器的颜色，然后通过示例学习了如何循环播放视频。
1K+ 次查看
