当前位置：网站首页 > 技术文章 > 正文

25k+ star!简单、轻量级的开源视频播放插件

zhezhongyun 2025-01-10 18:35 59 浏览

大家好，我是开源探索者，持续分享开源项目，关注技术的最新动态，分享自己的经验和见解。

大家好，我是开源探索者，一个热爱开源的程序员！

过年过年，这个时间应该是最温馨不过的。开源君在这里提前给各位朋友们拜年了，祝各位小伙伴们龙年大吉，想啥来啥哈~~

老规矩，地球不爆炸，更新不能停。

今天给大家分享一款非常好用的开源视频播放器插件 - plyr。

如果你经常接触视频播放相关的开发需求，那么plyr将会是你的好帮手。

它简单、轻量级、可访问和可定制化，受到了广大开发者的喜爱，已经在GitHub上标星24.8k。

性能特色

plyr支持HTML5视频和音频播放，同时也能够适应任意屏幕尺寸。这意味着你可以在不同的设备上使用plyr，无论是手机、平板还是电脑，它都能正常工作。

这是官方 Demo 的效果，plyr提供了强大的字幕功能，你可以手动打开或者关闭字幕，并且可以进行国际化处理，满足不同语言的需求。

还有画中画的效果。

另外，plyr还支持hls.js、Shaka和dash.js等流媒体播放，可以满足更多特定需求的使用场景。此外，你还可以选择不同的播放速度和分辨率进行播放，以及进行控件的国际化定制。

快速使用

先需要引入plyr的CDN文件：

然后，在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的官方文档。

更多项目细节，感兴趣的小伙伴可以自行去项目地址探索。

Github地址：
https://github.com/sampotts/plyr

结束语

在数字时代的浪潮中，有一群人他们不畏艰难，勇攀技术高峰，他们就是开源探索者。

他们不仅仅是技术的实践者，更是开源文化的传播者和推动者。

在开源的世界里，没有绝对的权威，只有共同的合作。

HTML5 Video(视频)

上一篇：html5的video标签实现对m3u8格式视频(HLS)的支持亲测可用
下一篇：DPlayer - 免费开源、轻量简洁的 HTML5 视频播放器，支持弹幕

25k+ star!简单、轻量级的开源视频播放插件

性能特色

快速使用

结束语

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）