关于ide:21-万-Star一个开源免费功能强大的视频播放器库

44次阅读

共计 2857 个字符,预计需要花费 8 分钟才能阅读完成。

以下文章来源于 进 击 的 Coder,作者 崔 庆 才

最近在开发一个前端我的项目,用到播放视频的性能,所以就查了下有什么前端的视频播放器库能够应用,明天来分享一下给大家。

这个库的名字叫做 Plyr,顾名思义其实就是 Player 的缩写,整体的预览成果如下:

官方网站:https://plyr.io/

GitHub 地址是:https://github.com/sampotts/plyr

看来一圈,发现这个库不仅好看优雅,而且性能非常丰盛。

上面咱们来介绍下它的一些内置性能。

总体概览

首先咱们来看看它都反对什么性能,咱们能够关上它的官网 Demo 网站,能够间接播放一个视频查看成果,如图所示:

整体看起来很不错,比浏览器自带的原生播放器看起来难看多了,各种管制条的 UI 都挺难看的。

接着咱们来看看有什么性能。

进度条和音量控制就不说了。

接着看看左边还有什么,第一个是字幕管制:

这里能够通过点击来开启或者敞开字幕,也就是说,这个播放器是反对咱们嵌入字幕文件的。

同时还反对很多设置,比方分辨率管制、播放速度管制:

其中播放速度管制还反对各种自定义速度,比方 1.25 倍、4 倍等等:

另外还反对视频画中画模式播放,只须要点击那个弹出按钮即可:

整体看来,这个官网的 Demo 就足以让我心动抉择它了!

具体性能

但性能必定不止这些,接下来咱们再回到 GitHub 主页看看它的介绍,它的介绍如下:

  • 📼 HTML 视频和音频、YouTube 和 Vimeo – 反对次要格局
  • 💪 无障碍– 齐全反对 VTT 字幕和屏幕阅读器
  • 🔧 可定制– 咱们能够自定义各种选项来让播放器出现不同的 UI。
  • 😎 洁净的 HTML – 应用正确的元素,比方 <input type="range"> 管制音量和应用<progress> 管制进度。
  • 📱 响应式– 实用于任何屏幕尺寸
  • 💵 获利– 从您的视频中赚钱
  • 📹 流式传输 - 反对 hls.js、Shaka 和 dash.js 流式播放
  • 🎛 API – 通过标准化 API 切换播放、音量、搜寻等
  • 🎤 事件– 不必搞乱 Vimeo 和 YouTube API,所有事件都是跨格局标准化的
  • 🔎 全屏– 反对原生全屏并回退到“全窗口”模式
  • ⌨️ 快捷键– 反对键盘快捷键
  • 🖥 画中画– 反对画中画模式
  • 📱 Playsinline – 反对 playsinline 属性
  • 🏎 速度管制– 即时调整速度
  • 📖 多个字幕– 反对多个字幕轨道
  • 🌎 i18n 反对– 反对控件的国际化
  • 👌 预览缩略图– 反对显示预览缩略图
  • 🤟 没有框架– 用“vanilla”ES6 JavaScript 编写,不须要 jQuery
  • 💁‍♀️ SASS – 蕴含在您的构建过程中

堪称是十分之弱小了!

那这个具体怎么应用呢?上面咱们再来介绍下。

应用

要应用 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" />

当然 Plyr 还反对 Node.js 我的项目间接援用,装置形式如下:

yarn add plyr

而后这样援用即可:

import Plyr from 'plyr';

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

Plyr 有一个十分强的性能,那就是它扩大了原生 HTML5 中 Media 相干标签的性能,比方咱们当初能够给 video 标签增加一些自定义的性能,比方增加一个 data-poster 属性来当作视频预览封面,比方增加一个 track 标签来增加字幕文件,写法如下:

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

同时 Plyr 还反对嵌入一些外链网站,比方 Youtube、Vimeo(如果反对中国的一些视频网站就好了)。

如果要援用 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>

款式自定义

另外 Plyr 还反对咱们增加一些自定义款式,咱们须要应用 CSS Custom Properties 即可轻松实现款式复写。

比如说,咱们想要把默认的按钮色彩由蓝色改成红色,那就能够间接增加 CSS 款式:

:root {--plyr-color-main: red}

这样 Plyr 就能够读取这个 CSS 属性,而后实现款式管制了。

更多的自定义款式名称能够参考:https://github.com/sampotts/p…。

配置自定义

方才咱们还提到了,Plyr 反对咱们配置一些 Options 选项来实现一些自定义的性能,这里性能也十分全面,比方:*

  • settings:是一个列表,咱们能够管制 settings 的性能列表,比方配置成 ['captions', 'quality', 'speed', 'loop'] 即可管制设置性能外面呈现字幕、分辨率、速度、循环播放等管制。
  • i18n:能够管制多语言配置。
  • blankVideo:如果是空的视频的话,默认播放什么。
  • autoplay:是否自动播放。

等等,还有很多,大家能够参考 https://github.com/sampotts/p… 来查看更多功能,总之能想到的简直都有了。

JavaScript API

另外 Play 还裸露了很多 API,比方 play、pause、stop、restart 等办法能够管制播放、暂停、进行、从新播放等等,甚至还有 airplay 都反对。

具体的性能大家能够参考 https://github.com/sampotts/p… 查看。

那么就介绍到这里啦,心愿对大家有帮忙~

开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库,包含:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

正文完
 0