Plyr 是一个基于 HTML5 的媒体播放器,支持 HTML5 视频和音频。它旨在提供一个简单、轻量级且可定制的播放器,同时支持现代浏览器。Plyr 提供了丰富的功能,包括自定义样式、键盘快捷键、全屏支持、字幕支持等。
安装使用:
// npm
npm install plyr
// import
import Plyr from 'plyr';
const player = new Plyr('#player');
功能和特性:
- 支持多种媒体格式
HTML5 视频和音频:支持标准的 HTML5
- 可访问性
字幕支持:支持 VTT 格式的字幕文件。
屏幕阅读器支持:确保播放器对屏幕阅读器友好。
- 高度可定制
自定义样式:通过 CSS 自定义播放器的外观。
API 支持:通过 JavaScript API 控制播放器的行为。
- 响应式设计
自适应屏幕大小:播放器会根据屏幕大小自动调整布局。
- 其他功能
广告支持:通过 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(); // 切换控制栏
GitHub:https://github.com/sampotts/plyr
官方文档:https://plyr.io/