前言
在现代化的 Web 应用开发中，视频成为了一个必要的组成部分。而要在网页上呈现和播放视频，我们需要使用视频播放器。Video.js 是一个广受欢迎的开源视频播放器，支持多种视频格式、多语言字幕和自定义控件等众多功能，并可使用插件来扩展功能。而视频分享网站 Vimeo 也提供了自己的 API 接口，便于开发者通过第三方应用程序（例如网站）使用 Vimeo 视频库。在这篇文章中，我们将学习如何使用 videojs-vimeo 这个 npm 包来实现 Vimeo 视频播放功能。
介绍 videojs-vimeo
videojs-vimeo 是一个 Video.js 插件，它提供了一种简单的方法来从 Vimeo 检索和在播放器中播放视频。该插件将 Vimeo 视频库的 ID 与播放器进行配对，并自动处理 Vimeo API 请求。videojs-vimeo 可以使用 Vimeo 的基本和高级接口功能，如 Vimeo OAuth 2.0 验证、Vimeo 全局视频设置、Vimeo 用户私人视频和 Vimeo 视频信息的多语言支持等。
安装 videojs-vimeo
如果你已经使用 npm 来管理项目依赖，那么可以使用以下命令来安装 videojs-vimeo：
npm install videojs-vimeo --save
这将下载 videojs-vimeo，并将其添加到 package.json 文件中。
使用 videojs-vimeo
首先，在页面上引入 Video.js 和 videojs-vimeo 的 JavaScript 文件。
<head> <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/7.14.3/video.js"></script> <script src="https://unpkg.com/@vimeo/player@^2.15.0/dist/player.js"></script> <script src="./node_modules/videojs-vimeo/dist/videojs-vimeo.js"></script> </head>
接下来，在 HTML 播放器标记中添加以下属性：
<video id="vimeo-player" class="video-js vjs-default-skin" controls preload="auto" data-setup='{"techOrder":["vimeo"], "sources": [{"type": "video/vimeo", "src": "https://vimeo.com/channels/staffpicks/229373662"}], "vimeo": {"id": "229373662", "autoplay": false}}' ></video>
其中，id 为播放器的唯一标识符，class 指定样式，controls 指定显示控制条，preload 指定在页面加载后立即加载视频数据。data-setup 是 Video.js 自定义选项的 JSON 格式的字符串，它指定了使用 videojs-vimeo 的必要配置，包括 vimeo 视频 ID 和是否自动播放。注意，sources 字段下的配置是为了保证能正常播放，这里的 src 可以随便设置。
在 JavaScript 中，通过以下代码来初始化播放器：
var player = videojs("vimeo-player");
最后，调用 videojs-vimeo 提供的方法来加载 Vimeo 视频：
player.vimeo(id);
其中 id 是 Vimeo 视频的 ID，可以在视频的 URL 或其嵌入代码中找到。
实例代码
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ------------ ----- ------------------------------------------------- ---------------- -- ------- ------------------------------------------------------ ------- ---------------------------------------------------------------------- ------- ------------------------------------------------------------------ ------- ------ ------ ----------------- --------------- ----------------- -------- -------------- ----------------------------------- ---------- --------- -------------- ------ ---------------------------------------------------- -------- ------ ------------ ----------- -------- --------- ------- ----------------------- --- ------ - ------------------------ -------------------------- --------- ------- -------展开代码
总结
videojs-vimeo 是一个强大的插件，它让我们可以轻松地在 Video.js 播放器中使用 Vimeo 视频。在这篇文章中，我们了解了如何使用 videojs-vimeo 实现 Vimeo 视频的加载和播放，并提供了示例代码。希望这篇文章对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193185
