22.7k stars的精美开源播放器

微信公众号:[开源日记],分享10k+Start的优质开源项目。

Plyr 是一个简单、轻量级、可访问和可定制的 HTML5、YouTube 和 Vimeo 媒体播放器，支持现代浏览器。

GitHub数据

22.7k stars
412 watching
2.7k forks

开源地址:https://github.com/sampotts/plyr

特点

📼 HTML 视频和音频、YouTube 和 Vimeo 支持主要格式
💪 无障碍– 完全支持 VTT 字幕和屏幕阅读器
🔧 可定制– 使用您想要的标记使播放器看起来像你想要的样子
📱 响应式– 适用于任何屏幕尺寸
📹 流式传输– 支持 hls.js、Shaka 和 dash.js 流式播放
🎛 API – 通过标准化 API 切换播放、音量、搜索等
🎤 事件– 不用搞乱 Vimeo 和 YouTube API，所有事件都是跨格式标准化的
🔎 全屏– 支持原生全屏并回退到“全窗口”模式
⌨️ 快捷键– 支持键盘快捷键
🖥 画中画– 支持画中画模式
📱 Playsinline – 支持playsinline属性
🏎 速度控制– 即时调整速度
📖 支持多个字幕– 支持多个字幕轨道
🌎 i18n 支持– 支持控件的国际化
👌 预览缩略图– 支持显示预览缩略图
🤟 没有框架– 用ES6 JavaScript 编写，不需要 jQuery

使用案例

直接引入

<link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />
  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>
<script src="https://cdn.plyr.io/3.7.2/plyr.js"></script>
<script>
  const player = new Plyr('#player');
</script>

Node.js中使用

安装

yarn add plyr

import Plyr from 'plyr';

const player = new Plyr('#player');

播放YouTube视频

<link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>
<script src="https://cdn.plyr.io/3.7.2/plyr.js"></script>
<script>
  const player = new Plyr('#player');
</script>

功能展示

字幕控制

通过点击来开启关闭字幕。

画中画模式

现在很流行的小窗画中画播放。

分辨率控制

支持576p,720p,1080p分辨率播放。

播放速度控制

最慢0.5倍速度播放,最快4倍播放。

高级功能自定义 CSS

参数	描述	默认
–plyr-color-main	主要的 UI 颜色。	#00b3ff
–plyr-video-background	用于使用 Alpha 通道视频和海报图像的视频和海报包装器的背景颜色。	rgba(0, 0, 0, 1)
–plyr-tab-focus-color	:focus-visible当元素是（等效）键盘焦点时用于虚线轮廓的颜色。	–plyr-color-main
–plyr-badge-background	菜单中徽章的背景颜色。	#4a5464
–plyr-badge-text-color	徽章的文本颜色。	#ffffff
–plyr-badge-border-radius	用于徽章的边框半径。	2px
–plyr-tab-focus-color	用于突出显示选项卡（键盘）焦点的颜色。	–plyr-color-main
–plyr-captions-background	字幕背景的颜色。	rgba(0, 0, 0, 0.8)
….还有很多自定义参数	….详情看GitHub主页