给女朋友做了个视频播放器
大家好，我是爱撸码的开源大叔！
短视频大火已经有很长时间了，日常工作中我们可能很容易接到视频播放相关的需求。大叔给大家推荐一款开源的视频播放器 plyr，在 GitHub 标星21.9k。
项目介绍
plyr 是一个简单、轻量级、可访问和可定制的 HTML5、YouTube 和 Vimeo 媒体播放器，支持现在主流的浏览器。
整体 UI 挺简洁的，样式也挺好看的。看下官方 Demo 的效果
字幕能够手动打开或者关闭，语言可以做国际化处理的，官方提供了相应的 API。
默认提供了一些简单的设置功能，包括开启或者关闭字幕，分辨率设置，播放速度设置。选项值都是可以调整的。
看下画中画的效果
切换到其他应用程序，画中画页面仍然是可见的。
特性
- 支持 HTML 视频和音频
- 支持任何屏幕尺寸
- 字幕可以开启或者关闭
- 通过标准化 API 切换播放、音量、搜索等
- 支持画中画模式
- 支持 hls.js, Shaka 和 dash.js 流播放
- 支持倍速播放
- 支持多种分辨率播放，576p、720p、1080p
- 控件支持国际化
- 支持定制化
使用方法
使用 Plyr，可以直接引用 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" />
HTML5 Video
<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 | Array | [‘captions’, ‘quality’, ‘speed’, ‘loop’] | 如果使用默认控件，则可以指定要在菜单中显示的设置 |
i18n | Object | See defaults.js | 用于UI的国际化（i18n）。 |
volume | Number | 1 | 介于0和1之间的数字，表示播放器的初始音量。 |
speed | Object | { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] } | selected：播放的默认速度。options：要在UI中显示的速度选项。 |
quality | Object | { default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] } | default是默认的质量级别（如果在源中存在）。选项是要显示的选项。这用于过滤可用的源。 |
总结
plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。