Plyr 配置详解

最新推荐文章于 2025-04-30 15:58:09 发布

yqcoder

最新推荐文章于 2025-04-30 15:58:09 发布

阅读量779

点赞数 26

文章标签：前端 node.js

本文链接：https://blog.csdn.net/weixin_64684095/article/details/146058540

版权

Plyr 是一个轻量级、响应式且可自定义的 HTML5 视频和音频播放器库，通过配置选项可以对其功能和外观进行灵活定制。

一、基本初始化与配置方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入 Plyr 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
    <title>Plyr 配置示例</title>
  </head>
  <body>
    <!-- 视频播放器元素 -->
    <video id="player">
      <source src="your-video-url.mp4" type="video/mp4" />
    </video>
    <!-- 引入 Plyr 的 JavaScript 文件 -->
    <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
    <script>
      // 获取视频元素
      const playerElement = document.getElementById("player");
      // 配置对象
      const playerConfig = {
        // 在这里添加具体的配置选项
      };
      // 初始化 Plyr 播放器并传入配置对象
      const player = new Plyr(playerElement, playerConfig);
    </script>
  </body>
</html>

二、常见配置选项

1. 控制栏相关配置

1.1 `controls`

自定义控制栏中显示的控件。可以通过数组指定要显示的控件名称。

const playerConfig = {
  controls: [
    "play-large",
    "play",
    "progress",
    "current-time",
    "mute",
    "volume",
    "captions",
    "settings",
    "fullscreen",
  ],
};

1.2 `hideControls`

设置是否在一段时间不操作后自动隐藏控制栏。

const playerConfig = {
  hideControls: true,
};

1.3 `controlTimeout`

当 hideControls 为 true 时，指定控制栏隐藏的延迟时间（毫秒）。

const playerConfig = {
  hideControls: true,
  controlTimeout: 2000, // 2 秒后隐藏控制栏
};

2. 播放相关配置

2.1 `autoplay`

设置是否在页面加载完成后自动播放视频。需要注意的是，现代浏览器对自动播放有一些限制，可能需要用户与页面进行交互后才能自动播放。

const playerConfig = {
  autoplay: true,
};

2.2 `loop`

设置是否循环播放视频。

const playerConfig = {
  loop: {
    active: true, // 开启循环播放
  },
};

2.3 `speed`

设置播放速度选项。可以通过数组指定允许的播放速度值，用户可以在控制栏的设置菜单中选择。

const playerConfig = {
  speed: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
};

3. 字幕相关配置

3.1 `captions`

配置字幕相关选项，包括默认开启字幕、字幕语言等。

const playerConfig = {
  captions: {
    active: true, // 默认开启字幕
    language: "en", // 默认字幕语言为英语
  },
};

4. 样式与外观配置

4.1 `ratio`

设置播放器的宽高比。常见的宽高比有 16:9、4:3 等。

const playerConfig = {
  ratio: "16:9",
};

4.2 `storage`

配置播放器状态的存储选项，例如用户设置的音量、播放速度等。可以通过设置 key 来指定存储的键名。

const playerConfig = {
  storage: {
    enabled: true, // 开启存储功能
    key: "plyr-storage", // 存储的键名
  },
};

5. 事件监听配置

Plyr 提供了丰富的事件，你可以通过监听这些事件来实现自定义的交互逻辑。

const playerElement = document.getElementById("player");
const player = new Plyr(playerElement);
// 监听播放事件
player.on("play", (event) => {
  console.log("视频开始播放");
});
// 监听暂停事件
player.on("pause", (event) => {
  console.log("视频暂停播放");
});

三、第三方视频源配置

如果要播放 YouTube 或 Vimeo 视频，还需要额外的配置。

1. YouTube 视频

<video
  id="player"
  data-plyr-provider="youtube"
  data-plyr-embed-id="VIDEO_ID"
></video>
<script>
  const player = new Plyr("#player", {
    youtube: {
      noCookie: true, // 使用无 Cookie 版本的 YouTube 播放器
    },
  });
</script>

2. Vimeo 视频

<video
  id="player"
  data-plyr-provider="vimeo"
  data-plyr-embed-id="VIDEO_ID"
></video>
<script>
  const player = new Plyr("#player", {
    vimeo: {
      byline: false, // 不显示视频作者信息
      portrait: false, // 不显示视频作者头像
    },
  });
</script>