鱼而已

V1

2022/10/23阅读:25主题:萌绿

22.8K Star!强烈推荐一款功能强大的视频播放器组件!

哈喽,大家好!我是前端实验室的小师妹!

科学研究表明:人一但有了爱情,智商情商都会提高95%,烦恼也会消失95%。但问题来了,爱情从哪里来科学家却不肯说,只留下了一串奇怪的符号:KFC,Crazy,Thursday。

今天是疯狂星期四,那要去KFC消费一波了...

话不多说,今天给大家分享一款功能强大、UI清爽优雅的一款视频播放器组件!

Plyr

Plyr是一个简单,轻量级,可访问和可定制的 HTML5,YouTube 和 Vimeo 媒体播放器,支持现代浏览器。

先看看效果,UI是真的清爽好看

基本的播放、暂停等功能咱就不说了,我们看的还可以设置标题、清晰度、播放速度。

其中播放速度控制还支持各种自定义速度,比如 1.25 倍、4 倍等等

字幕开关,支持自定义嵌入字幕文件

支持画中画模式

功能特征

使用体验

安装

<script src="https://cdn.plyr.io/3.7.2/plyr.js"></script>

or

<script src="https://cdn.plyr.io/3.7.2/plyr.polyfilled.js"></script>

or

yarn add plyr

视频 & 音频

Plyr 扩展了原生 HTML5 中 Media 相关标签的功能,如 VideoAudio标签

<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>
<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
</audio>

对于 YouTube 和 Vimeo 播放器,Plyr 使用渐进式增强功能来增强默认嵌入,如果要引用 Youtube,那么只需要给 div 添加一些 class 就可以了。

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Play 提供了很多 API,比如 play、pause、stop、restart 等方法可以控制播放、暂停、停止、重新播放等等。具体的功能大家感兴趣的话阅读其官方文档查看。

Github地址:https://github.com/sampotts/plyr
官网地址:https://plyr.io/

分类:

前端

标签:

前端

作者介绍

鱼而已
V1