JavaScript HTML5播放器 Plyr

Plyr 是一个简单、轻量级、可定制的HTML5播放器

Posted by cl9000 on April 06, 2020

​

Plyr 是一个简单的可定制的 HTML5 媒体播放器，使用原生 JavaScript 没有其他依赖。支持 YouTube 和 Vimeo 。

特性

​

  • 📼 HTML视频和音频，YouTube和Vimeo -支持主要格式
  • 💪 可访问-充分支持VTT字幕和屏幕阅读器
  • 🔧 Customizable -用你想要的标记让播放器看起来像你想要的样子
  • 😎 干净的HTML -使用正确的元素。<input type="range">表示音量，<progress>表示* 进度，<button>s表示按钮。没有<span>或<a href="#">按钮hacks
  • 📱 响应-工作与任何屏幕大小
  • 💵 货币化-从你的视频赚钱
  • 📹 流媒体-支持hls.js, Shaka和dash.js流媒体播放
  • 🎛 API -通过一个标准化的API切换播放、音量、搜索等
  • 🎤 事件-没有杂乱无章的Vimeo和YouTube api，所有的事件是标准化的格式
  • 🔎 全屏-支持本机全屏回退到“全窗口”模式
  • ⌨️ 快捷键-支持键盘快捷键
  • 🖥 Picture-in-Picture -支持Picture-in-Picture模式
  • 📱 Playsinline -支持Playsinline属性
  • 🏎 速度控制-在飞行中调整速度
  • 📖 多个标题-支持多个标题轨道
  • 🌎 i18n支持-支持控件的国际化
  • 👌 预览缩略图-支持显示预览缩略图
  • 🤟 没有框架-写在“香草”ES6 JavaScript，不需要jQuery
  • 💁♀️ SASS -包括在您的构建过程中

插件 & 组件

一些了不起的人已经为cms制作了插件，为JavaScript框架制作了组件:

Type Maintainer Link
WordPress Brandon Lavigne (@drrobotnik) https://wordpress.org/plugins/plyr/
Angular Simon Bobrov (@smnbbrv) https://github.com/smnbbrv/ngx-plyr
React Chintan Prajapati (@chintan9) https://github.com/chintan9/plyr-react
Vue Gabe Dunn (@redxtech) https://github.com/redxtech/vue-plyr
Neos Jon Uhlmann (@jonnitto) https://packagist.org/packages/jonnitto/plyr
Kirby Dominik Pschenitschni (@dpschen) https://github.com/dpschen/kirby-plyrtag
REDAXO FriendsOfRedaxo/skerbis (@skerbis) https://github.com/FriendsOfREDAXO/plyr
svelte-plyr Ben Woodward / benwoodward (@benwoodward) https://github.com/benwoodward

安装

1
2
3
4
5
6
7
8
npm
npm install plyr
​
Bower
bower install plyr
​
Ember
ember addon:install ember-cli-plyr

快速开始

这是一个快速开始的示例。还有一个在 Codepen https://codepen.io/sampotts/pen/jARJYp 上的演示。

HTML

Plyr 扩展了标准的 HTML5 标记，这就是你需要的那些类型。

HTML5 视频

1
2
3
4
5
6
<video poster="/path/to/poster.jpg" controls>
  <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>

HTML5 音频

1
2
3
4
<audio controls>
  <source src="/path/to/audio.mp3" type="audio/mp3">
  <source src="/path/to/audio.ogg" type="audio/ogg">
</audio>

对于 YouTube 和 Vimeo ，Plyr 使用标准的 YouTube API 标记：

嵌入 YouTube

1
<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>

嵌入 Vimeo

1
<div data-type="vimeo" data-video-id="143418951"></div>

注意：data-video-id 的值可以是视频的 ID 或 URL 。

JavaScript

在 标记之前添加 plyr.js 脚本，然后调用 plyr.setup() 。

1
2
<script src="path/to/plyr.js"></script>
<script>plyr.setup();</script>

CSS

在 标签中引入 plyr.css 样式。 

1
<link rel="stylesheet" href="path/to/plyr.css">

SVG 雪碧图

SVG 雪碧图从我们的 CDN 自动加载。你也可以下载后放在自己的服务器中（https://cdn.plyr.io/2.0.13/plyr.svg）

高级

LESS & SASS/SCSS

你可以使用 /src 中包含的 plyr.less 或 plyr.scss 文件作为构建的一部分，并根据你的设计更改变量。

SVG

Plyr 控件中使用的图标被放到 SVG 雪碧图中。默认情况下，雪碧图自动从我们的 CDN 加载。如果你已经有了自己的图标，你可以载入进来（ /src/sprite ）。

####使用 iconUrl 选项
然而，你可以指定自己的 iconUrl 选项，并且 Plyr 将确定 url 是否是绝对的，由于当前的浏览器限制或需要由 AJAX/CORS 加载，只需直接使用路径即可。

跨域资源 (CORS)

示例中的 <video> 元素使用跨域属性。这是因为 TextTrack 标题是从另一个域加载的。如果你的 TextTrack 字幕也托管在另一个域上，则需要添加此属性，并确保您的主机具有正确的 <meta>设置。有关 CORS 可查看 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

标题

支持 WebVTT 字幕。要添加字幕轨道，请检查 HTML 中是否有 元素。确保验证你的字幕文件。

JavaScript

初始化

默认情况下，setup() 将查找所有 <video> ，<audio> 和 [data-type] 元素。查找到的每个目标媒体元素都将被包裹在 <div> 中以添加样式和设置。你可以指定使用 setup()的各种参数，包括不同的节点列表 ，HTML 元素 ，HTML 元素数组或字符串选择器，如下所示：

传递一个节点列表：

1
plyr.setup(document.querySelectorAll('.js-player'), options);

传递一个 HTML 元素:

1
plyr.setup(document.querySelector('.js-player'), options);

传递一组 HTML 元素数组：

1
2
3
4
plyr.setup([
truedocument.querySelector('.js-player-1'),
truedocument.querySelector('.js-player-2')
], options);

传递一个字符串选择器：

1
plyr.setup('.js-player', options);

节点列表，HTML 元素或字符串选择器可以是目标 <video> ，<audio> 或 [data-type] （嵌入）元素本身或容器元素。

只传递选项对象：

1
plyr.setup(options);

setup() 将返回一个可以与 API 方法一起使用的实例数组。

触摸范围

一些移动浏览器（特别是 iOS 上的移动 Safari）似乎有与 <input type ="range">元素有关的问题，触摸轨迹设置的值不起作用，滑动拇指可能会很棘手。为了解决这个问题，我创建了 RangeTouch ，我建议你将它用在你的解决方案中。这是一个很小的脚本，对于触摸设备上的用户来说，这是非常有益的。

API

访问 plyr 实例的最简单方法是将调用的返回值存储到 setup() 中：

1
var players = plyr.setup('.js-player');

这将返回所有被初始化的实例数组。另一种方法是使用 plyr.get() 获取给定容器中的所有实例，例如：

1
var players = plyr.get('.js-player');

如果没有参数被传递，它将在当前文档中查找所有实例。这将返回给定选择器中找到的所有实例的数组。

最后一个选项是通过事件处理程序访问实例：

1
2
3
instance.on('ready', function(event) {
  var instance = event.detail.plyr;
});

赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript HTML5播放器 Plyr
FRIENDS