⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处极客之家「丛林」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

今天给大家介绍一款非常好用的开源视频播放器插件——plyr。它因为简单、轻量级、可访问和可定制化，受到了广大开发者的喜爱，已经在GitHub上标星25.6k。

特征

无障碍- 全面支持 VTT 字幕和屏幕阅读器
可定制- 使用您想要的标记使播放器看起来如您所愿
干净的 HTML - 使用正确的元素。
响应式- 适用于任何屏幕尺寸
流媒体- 支持 hls.js、Shaka 和 dash.js 流媒体播放
API - 通过标准化 API 切换播放、音量、搜索等
全屏- 支持原生全屏，并可恢复至“全窗口”模式
快捷方式- 支持键盘快捷键
画中画- 支持画中画模式
Playsinline-支持playsinline属性
速度控制——随时调整速度
多字幕- 支持多字幕轨道
i18n 支持- 支持控件的国际化
预览缩略图- 支持显示预览缩略图
无需框架- 使用“原始”ES6 JavaScript 编写，无需 jQuery

使用

先需要引入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" />

然后，在HTML页面中添加如下的视频标签，即可使用plyr进行视频播放：

<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: ['captions', 'quality', 'speed', 'loop'], // 配置显示的设置项
i18n: {...}, // 用于UI的国际化
volume: 1, // 播放器初始音量，范围是0-1
speed: {
  selected: 1,
  options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
}, // 播放速度的配置
quality: {
  default: 576,
  options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
}, // 分辨率的配置

更多的配置项和使用方法可以参考plyr的官方文档。

界面截图

预进度

画中画

开源地址

https://github.com/sampotts/plyr

芋道源码 —— 纯源码解析博客

25.6k star！一款开源、简单、轻量级的视频播放插件

特征

使用

界面截图

开源地址