26.8 K，一款优雅的 HTML5 视频/音频播放器-Plyr

更多新鲜技术资讯，欢迎关注公众号： Linux开源先锋

大家好，今天给大家介绍一个在 GitHub 上超火的开源项目 - Plyr。

这是一个简单、轻量级且功能强大的 HTML5 媒体播放器,目前已获得超过 26.8k 的 star。

为什么选择 Plyr?

作为开发者,我们经常需要在网页中嵌入视频或音频播放器。虽然浏览器原生支持【video】和【audio】标签,但默认的播放器控件往往不够美观,功能也比较有限。Plyr 就是为了解决这个问题而生。

主要特性

多格式支持

HTML5 视频和音频
YouTube 视频
Vimeo 视频
支持直播流(HLS, Dash等)

功能丰富

支持字幕和画中画
支持倍速播放
支持预览缩略图
支持快捷键控制
支持全屏播放
支持清晰度切换

性能出色

轻量级,无依赖
原生 ES6 编写
支持 CDN 加速

快速开始

1. 安装

# NPMnpm install plyr
# 或者使用 CDN<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script><link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">

2. HTML 结构

<!-- 视频播放器 --><video id="player" playsinline controls>    <source src="/path/to/video.mp4" type="video/mp4" />    <source src="/path/to/video.webm" type="video/webm" />        <!-- 字幕可选 -->    <track kind="captions" label="中文字幕" src="/path/to/captions.vtt" srclang="zh" default /></video>
<!-- YouTube 播放器 --><div class="plyr__video-embed" id="player">    <iframe        src="https://www.youtube.com/embed/bTqVqk7FSmY"        allowfullscreen        allowtransparency        allow="autoplay"    ></iframe></div>

3. JavaScript 初始化

const player = new Plyr('#player', {    // 配置选项    controls: [        'play-large', 'play', 'progress',         'current-time', 'mute', 'volume',         'captions', 'settings', 'pip',         'airplay', 'fullscreen'    ]});

插入效果：

高级功能展示

1. 清晰度切换

const player = new Plyr('#player', {    quality: {        default: 576,        options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]    }});

2. 预览缩略图

const player = new Plyr('#player', {    previewThumbnails: {        enabled: true,        src: '/path/to/thumbnails.vtt'    }});

3. 自定义主题

:root {    --plyr-color-main: #1ac266;    --plyr-video-background: #000;    --plyr-menu-background: rgba(255, 255, 255, 0.9);}

实用场景

在线教育平台
视频门户网站
企业官网
音乐网站

浏览器支持

Plyr 支持所有主流的现代浏览器:

Chrome
Firefox
Safari
Edge
Opera
IE11(需要 polyfill)

总结

Plyr 是一个非常优秀的开源播放器,它:

界面美观,功能强大
使用简单,扩展性好
文档完善,社区活跃

如果你正在寻找一个优秀的 Web 播放器方案,Plyr 绝对值得一试。

项目地址: https://github. com/sampotts/plyr

演示地址: plyr.io

如果觉得文章有用,欢迎点赞转发。如果你有其他好用的前端组件推荐,也欢迎在评论区分享!

更多新鲜技术资讯，欢迎关注公众号： Linux开源先锋

#开源项目 #前端开发 #播放器 #JavaScript

标签