这款神器也开源了！

大家好，我是爱撸码的开源大叔！

短视频大火已经有很长时间了，日常工作中我们可能很容易接到视频播放相关的需求。大叔给大家推荐一款开源的视频播放器 plyr，在GitHub 标星21.9k。

项目介绍

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

整体 UI 挺简洁的，样式也挺好看的。看下官方 Demo的效果

字幕能够手动打开或者关闭，语言可以做国际化处理的，提供了相应的 API。

默认提供了一些简单的设置功能，包括开启或者关闭字幕，分辨率设置，播放速度设置。选项值都是可以调整的。

看下画中画的效果

切换到其他应用程序，画中画页面仍然是可见的。

特性

• 支持 HTML 视频和音频
• 支持任何屏幕尺寸
• 字幕可以开启或者关闭
• 通过标准化 API 切换播放、音量、搜索等
• 支持画中画模式
• 支持 hls.js, Shaka 和 dash.js 流播放
• 支持倍速播放
• 支持多种分辨率播放，576p、720p、1080p
• 控件支持国际化
• 支持定制化

使用方法

要使用 Plyr，可以直接引用 Plyr 的 CDN 文件

<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />

HTML5 Video

<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>

配置项

下面列举一些基础配置项，更多配置可以查看官方文档。

配置项	类型	默认值	说明
settings	Array	[‘captions’, ‘quality’, ‘speed’, ‘loop’]	如果使用默认控件，则可以指定要在菜单中显示的设置
i18n	Object	See defaults.js	用于UI的国际化（i18n）。
volume	Number	1	介于0和1之间的数字，表示播放器的初始音量。
speed	Object	{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }	selected：播放的默认速度。options：要在UI中显示的速度选项。
quality	Object	{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }	default是默认的质量级别（如果在源中存在）。选项是要显示的选项。这用于过滤可用的源。

总结

plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。有这方面需求的小伙伴在公众号后台回复“小分队” 上车吧~~