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

yumo6666个月前 (05-02)技术文章36

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

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

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

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

今天给大家分享一款非常好用的开源视频播放器插件 - 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

结束语

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

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

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

相关文章

这可能是目前最简单的电视播放电脑里的视频的方法

最近想重温电脑里的视频,想要用电视来看,找了很多方法,比如电脑搭建samba服务器,搭建jellyfin服务器,把视频拷贝到U盘里播放等等,设置操作复杂且对电脑的配置要求比较高,前前后后折腾了很久,虽...

HTML5中video标签如何使用(h5的video标签)

HTML5中的video标签用于播放视频文件的,在video标签中我们可以设置窗口的宽高,视频的自动播放,循环播放以及视频的封面图片等等HTML5是下一代HTML,新增了许多新的标签,这些标签实现了许...

Qt使用FFmpeg播放视频(ffmpeg播放视频命令)

一、使用场景  因为项目中需要加载MP4播放开机视频,而我们的设备所使用的架构为arm架构,其中缺乏一些多媒体库。安装这些插件库比较麻烦,所以最终决定使用FFmpeg播放视频。二、下载编译ffmpeg...

浏览器播放rtsp视频流解决方案(浏览器rtsp播放器)

最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究。而浏览器不能直接播放,只有通过插件或者转码来实现这个需求。要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一些...

怎么制作宣传片视频(制作宣传片制作)

宣传片现在越来越受欢迎,这也就是为什么企业之间更容易被宣传片所吸引。不仅能够为企业宣传形象,还能够打造个性品牌,为企业盈利。那么今天大家就和【视频工厂】小编就一起来看看怎么制作宣传片视频的相关内容吧。...

HTML 面试全攻略(htmlcss面试题库)

HTML 是前端开发的基石,是每个开发者必须掌握的核心技能。本文整理了高频 HTML 面试题,并系统梳理了相关知识点,帮助你在面试中脱颖而出,同时为实际开发工作打下坚实基础。 一、HTML 基础概念(...