在 html 中如何使用 plyr 组件

卖烤肠的小马哥

已于 2025-03-25 14:55:41 修改

阅读量5.4k

点赞数 2

分类专栏： JavaScript 文章标签： javascript js css vue 视频处理

于 2021-04-13 14:15:04 首次发布

本文链接：https://blog.csdn.net/weixin_43316300/article/details/115656104

版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

文章目录

前言
一、Plyr 是什么？
二、使用步骤
三、总结
四、感谢

前言

Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。支持自定义的播放控制和 WebVTT 字幕。

一、Plyr 是什么？

Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。功能有以下几点：倍速设置、画中画模式、全屏显示等

可访问性 - 完全支持字幕和屏幕阅读器
轻量级 - 压缩后只有 4.8Kb
可定制 - 外观可以根据需要进行调整
语义化 - 使用 HTML5 的输入框进行音量和进度的调整
快速响应 - 就像你预期的那样
音频和视频- 支持视频和纯音频
API - 易用 API
向下兼容 - 如果浏览器不支持，则自动使用内建播放器
全屏支持 -支持原生全屏和退出全屏
无依赖 - 使用原生 JS 编写，不需要jQuery

二、使用步骤

1.引入库

代码如下：
可以使用 https://www.bootcdn.cn/ 中文网开源项目免费 CDN 加速服务中的资源；

css

https://cdn.bootcdn.net/ajax/libs/plyr/3.6.3/plyr.min.css

js

https://cdn.bootcdn.net/ajax/libs/plyr/3.6.4/plyr.min.js

直接引用 Player 的 css 和 js 文件即可；
如果需要项目版本库地址可以用 https://github.com/sampotts/plyr.git

1.1 原生 html 使用时的代码

<!DOCTYPE html>
<html lang="CN">
<head>
  <meta charset="UTF-8">
  <title>视频</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/plyr/3.6.3/plyr.min.css">
</head>
<body>
  <video id="videoAr">
    <source src="./gw.mp4">
  </video>
</body>
  <script src="https://cdn.bootcdn.net/ajax/libs/plyr/3.6.4/plyr.min.js"></script>
  <script>
     let vs = document.getElementById('videoAr');
     const player = new Plyr(vs,{
      i18n: {
        speed: '速度',
        normal: '正常',
      }
     });
     window.player = player;
  </script>
</html>

2.配置项

更多的配置项可以查看 https://github.com/sampotts/plyr.git 中的 README.md 文件，以下只有基础的配置：

配置项	类型	默认值	说明
enabled	Boolean	true	完全禁用Plyr。这将允许您执行用户代理检查或类似操作，以编程方式启用或禁用特定UA的Plyr。下面的例子。
debug	Boolean	false	在控制台中显示调试信息。
controls	Array, Function or Element	[‘play-large’, ‘play’, ‘progress’, ‘current-time’, ‘mute’, ‘volume’, ‘captions’, ‘settings’, ‘pip’, ‘airplay’, ‘fullscreen’]	如果传递函数，则假定方法将为控件返回元素或HTML字符串。将向函数传递三个参数：id（播放器的唯一id）、seektime（seektime步骤，以秒为单位）和title（媒体标题）。
settings	Array	[‘captions’, ‘quality’, ‘speed’, ‘loop’]	如果使用默认控件，则可以指定要在菜单中显示的设置
i18n	Object	See defaults.js	用于UI的国际化（i18n）。
loadSprite	Boolean	true	加载指定为iconUrl选项的SVG精灵（如果是URL）。如果为false，则假定您自己正在处理sprite加载。
iconUrl	String	null	指定SVG精灵的URL或路径。
iconPrefix	String	plyr	为默认控件中使用的图标指定id前缀（例如，“plyr play”将为“plyr”）。如果您使用自己的SVG sprite但使用默认控件，则这是为了防止冲突。大多数人可以忽略这个选项。
blankVideo	String	https://cdn.plyr.io/static/blank.mp4	指定用于正确取消网络请求的空白视频文件的URL或路径。
autoplay²	Boolean	false	加载时自动播放媒体。如果或元素上存在autoplay属性，则该属性将自动设置为true。
autopause¹	Boolean	true	一次只允许一个播放。
seekTime	Number	10	当用户点击快进或快退时搜索的时间，以秒为单位。
volume	Number	1	介于0和1之间的数字，表示播放器的初始音量。
muted	Boolean	false	是否开始播放静音。如果或元素上存在muted属性，则该属性将自动设置为true。
clickToPlay	Boolean	true	单击（或轻触）视频容器将切换播放/暂停。
disableContextMenu	Boolean	true	禁用右键单击菜单上的视频，以帮助非常原始的模糊，以防止下载的内容。
hideControls	Boolean	true	无鼠标或焦点移动2秒后，在控制元素模糊（制表符弹出）、播放开始或进入全屏时自动隐藏视频控件。一旦鼠标移动，控件元素被聚焦或播放暂停，控件就会立即重新出现。
resetOnEnd	Boolean	false	播放完成后，将播放重置为开始。
keyboard	Object	{ focused: true, global: false }	仅为重点玩家或全局启用键盘快捷键
tooltips	Object	{ controls: false, seek: true }	controls：将控件标签作为工具提示显示在：hover&：focus上（默认情况下，标签仅为屏幕阅读器）。seek：显示一个搜索工具提示，在单击时指示媒体要搜索的位置。
duration	Number	null	指定媒体的自定义持续时间。
invertTime	Boolean	true	将当前时间显示为倒计时而不是增量计数器。
toggleInvert	Boolean	true	允许用户单击以切换以上选项。
listeners	Object	null	允许将事件侦听器绑定到默认处理程序之前的控件。看到了吗默认值.js对于可用的侦听器。如果处理程序阻止事件的默认值(event.preventDefault（）），默认处理程序将不会启动。
captions	Object	{ active: false, language: ‘auto’, update: false }	active：在默认情况下切换字幕是否应处于活动状态。language：设置要加载的默认语言（如果可用）。'“自动”使用浏览器语言。update：听改变曲目和更新菜单。这对于某些流媒体库是必需的，但可能会导致无法选择的语言选项）。
fullscreen	Object	{ enabled: true, fallback: true, iosNative: false, container: null }	enabled：切换是否应启用全屏。fallback：允许回退到完整窗口解决方案（true/false/“force”）。iosNative：进入全屏时是否使用本机iOS全屏（无自定义控件）。container：player元素祖先的选择器，允许上下文内容在全屏模式下保持可见。忽略非祖先。
ratio	String	null	强制所有视频的纵横比。格式为“w:h”-例如“16:9”或“4:3”。如果没有指定，那么HTML5和Vimeo的默认设置是使用视频的本机分辨率。由于YouTube无法通过SDK提供维度，16:9是一个合理的默认值。
storage	Object	{ enabled: true, key: ‘plyr’ }	enabled：允许使用本地存储存储用户设置。key：要使用的密钥名称。
speed	Object	{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }	selected：播放的默认速度。options：要在UI中显示的速度选项。YouTube和Vimeo将忽略0.5-2范围之外的任何选项，因此此范围之外的选项将自动隐藏。
quality	Object	{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }	default是默认的质量级别（如果在源中存在）。选项是要显示的选项。这用于过滤可用的源。
loop	Object	{ active: false }	active：是否循环当前视频。如果循环属性出现在或元素上，它将自动设置为true这是一个支持未来功能的对象。
urls	Object	See source.	如果您希望覆盖任何API url，那么您可以在这里这样做。您还可以为“下载”按钮设置自定义下载URL。
vimeo	Object	{ byline: false, portrait: false, title: false, speed: true, transparent: false }	有些是基于其他配置选项自动设置的，即：loop, autoplay, muted, gesture, playsinline
previewThumbnails	Object	{ enabled: false, src: ‘’ }	enabled：是否启用预览缩略图（必须由您生成）。src：必须是表示包含图像URL的VTT文件的URL的字符串或字符串数组。