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

程序员老鱼

发布于 2023-10-08 06:07:03

1.1K03

代码可运行

文章被收录于专栏：前端实验室前端实验室

运行总次数：3

代码可运行

大家好，我是「前端实验室」爱分享的了不起~

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

Plyr

Plyr是一个简单，轻量级，可访问和可定制的 HTML5，YT 和 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 相关标签的功能,如 Video、Audio标签

<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>

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

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://www.yxxxbx.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>