[开源项目] Plyr:HTML5 开源 自定义音视频播放器

[复制链接]

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×

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

安装使用:

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

功能和特性:

  1. 支持多种媒体格式

HTML5 视频和音频:支持标准的 HTML5

  1. 可访问性

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

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

  1. 高度可定制

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

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

  1. 响应式设计

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

  1. 其他功能

广告支持:通过 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/

小时候,看腻了农村的牛和马,长大后,来到了城里,才知道原来到处都是牛马!
全部回复0 显示全部楼层
暂无回复,精彩从你开始!

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于楼主

管理员
  • 主题

    1073
  • 回答

    438
  • 积分

    2984
虚位以待,此位置招租
虚位以待,此位置招租

商务推广

    此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租
最新热评 加载中...