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

特征

  • 无障碍- 全面支持 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的官方文档。

界面截图

预进度
画中画
版权声明：
1、本网站名称：帝企吧
2、本站永久网址：https://www.diqiba.com
3、本网站的文章部分内容可能来源于网络及作者投稿，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7、本站所有资源来源于互联网，仅用于学习及参考使用，切勿用于商业用途，如产生法律纠纷本站概不负责！ 8、资源除标明原创外均来自网络转载，版权归原作者所有，若侵犯到您权益请联系我们删除，我们将及时处理！ 9、若您需使用非免费的软件或服务，请购买正版授权并合法使用！