介绍

plyr是一款简单易用，可定制化的Html5的音视频播放器

Github

https://github.com/sampotts/plyr

特性

• HTML视频和音频
• 无障碍-完全支持VTT字幕和屏幕阅读器
• 可自定义-使用所需的标记让播放器可定制化
• 干净的HTML-使用原生的元素。表示音量，表示进度，以及表示按钮
• 自适应-适用于任何屏幕尺寸
• 流媒体-支持hls.js，Shaka和dash.js流媒体播放
• API-通过标准化的API切换播放，音量，搜索等
• 灵活，所有活动都跨格式标准化
• 全屏-支持本机全屏并回退到“全屏”模式
• ⌨️ 快捷键-支持键盘快捷键
• 画中画-支持画中画模式
• Playsinline-支持playsinline属性
• 速度控制-即时调整速度
• 多个字幕-支持多个字幕轨道
• i18n支持-支持控件国际化
• 预览缩略图-支持显示预览缩略图
• 没有框架-用“原生” ES6 JavaScript编写，不需要jQuery
• ♀️ SASS-包含在您的构建过程中

快速开始

在html中直接使用

• HTML5视频

注：封面图像应使用data-poster指定。这是为了防止它被下载两次。如果确定图像将被缓存，则仍可以使用poster属性进行真正的渐进增强。

• HTML音频

在JavaScript中使用

import Plyr from 'plyr';

const player = new Plyr('#player');

或者

CSS

总结

plyr是一个简单易用的浏览器端音视频播放器，在并不需要特别复杂的音视频场景是一个不错的选择！