Plyr：HTML5开源自定义音视频播放器

技术 PRO 稿源：前端资源推荐 2025-06-12 09:13

文章来自公众号：前端资源推荐

Plyr 是一个基于 HTML5 的媒体播放器，支持 HTML5 视频和音频。它旨在提供一个简单、轻量级且可定制的播放器，同时支持现代浏览器。Plyr 提供了丰富的功能，包括自定义样式、键盘快捷键、全屏支持、字幕支持等。

安装使用：

// npm
npm install plyr
// import
import Plyr from 'plyr';
const player = new Plyr('#player');

功能和特性：

1. 支持多种媒体格式

HTML5 视频和音频：支持标准的 HTML5 <video> 和 <audio> 元素。

2. 可访问性

字幕支持：支持 VTT 格式的字幕文件。

屏幕阅读器支持：确保播放器对屏幕阅读器友好。

3. 高度可定制

自定义样式：通过 CSS 自定义播放器的外观。

API 支持：通过 JavaScript API 控制播放器的行为。

4. 响应式设计

自适应屏幕大小：播放器会根据屏幕大小自动调整布局。

5. 其他功能

广告支持：通过 Vi.ai 提供广告支持。

流媒体支持：支持 HLS.js、Shaka 和 Dash.js 流媒体播放。

键盘快捷键：支持多种键盘快捷键，提升用户体验。

多语言支持：支持国际化，方便开发多语言应用。

预览缩略图：支持显示预览缩略图。

画中画模式：支持画中画模式（仅限支持该功能的浏览器）。

API 配置：

const player = new Plyr('#player', {
controls: [
    'play-large',     // 大播放按钮
    'play',           // 播放/暂停按钮
    'progress',       // 进度条
    'current-time',   // 当前时间
    'mute',           // 静音按钮
    'volume',         // 音量控制
    'captions',       // 字幕按钮
    'settings',       // 设置按钮
    'pip',            // 画中画模式按钮
    'airplay',        // AirPlay 按钮
    'fullscreen'      // 全屏按钮
  ],
settings: [
    'captions', // 字幕
    'quality',  // 质量
    'speed',    // 播放速度
    'loop'      // 循环播放
  ],
i18n: {
    restart: 'Restart',                // 重新播放
    rewind: 'Rewind {seektime}s',      // 快退
    play: 'Play',                      // 播放
    pause: 'Pause',                    // 暂停
    fastForward: 'Forward {seektime}s',// 快进
    seek: 'Seek',                      // 寻找
    played: 'Played',                  // 已播放
    buffered: 'Buffered',              // 已缓冲
    currentTime: 'Current time',       // 当前时间
    duration: 'Duration',              // 总时长
    volume: 'Volume',                  // 音量
    mute: 'Mute',                      // 静音
    unmute: 'Unmute',                  // 取消静音
    enableCaptions: 'Enable captions', // 启用字幕
    disableCaptions: 'Disable captions', // 禁用字幕
    enterFullscreen: 'Enter fullscreen', // 进入全屏
    exitFullscreen: 'Exit fullscreen', // 退出全屏
    frameTitle: 'Player for {title}',  // 播放器标题
    captions: 'Captions',              // 字幕
    settings: 'Settings',              // 设置
    speed: 'Speed',                    // 播放速度
    normal: 'Normal',                  // 正常
    quality: 'Quality',                // 质量
    loop: 'Loop',                      // 循环
    start: 'Start',                    // 开始
    end: 'End',                        // 结束
    all: 'All',                        // 全部
    reset: 'Reset',                    // 重置
    disabled: 'Disabled',              // 禁用
    enabled: 'Enabled',                // 启用
    advertisement: 'Advertisement',    // 广告
  },
});

方法函数：

player.play(); // 开始播放
player.pause(); // 暂停播放
player.togglePlay(); // 切换播放状态
player.stop(); // 停止播放并重置到开始
player.restart(); // 重新播放
player.rewind(10); // 快退 10 秒
player.forward(10); // 快进 10 秒
player.increaseVolume(0.1); // 增加音量 10%
player.decreaseVolume(0.1); // 减少音量 10%
player.toggleCaptions(); // 切换字幕
player.fullscreen.enter(); // 进入全屏
player.fullscreen.exit(); // 退出全屏
player.fullscreen.toggle(); // 切换全屏
player.airplay(); // 触发 AirPlay 对话框
player.setPreviewThumbnails({ src: '/path/to/thumbnails.vtt' }); // 设置预览缩略图
player.toggleControls(); // 切换控制栏

0XU.CN