投稿

plyr–简单、易用且可定制的H5音视频播放器

Vedu • • 资源分享 • 阅读 2604

介绍

plyr是一款简单易用，可定制化的Html5的音视频播放器

一个简单、易用且可定制的H5音视频播放器——plyr

Github

https://github.com/sampotts/plyr

特性

  • HTML视频和音频
  • 无障碍-完全支持VTT字幕和屏幕阅读器
  • 可自定义-使用所需的标记让播放器可定制化
  • 干净的HTML-使用原生的元素。表示音量，表示进度，以及
  • 自适应-适用于任何屏幕尺寸
  • 流媒体-支持hls.js，Shaka和dash.js流媒体播放
  • API-通过标准化的API切换播放，音量，搜索等
  • 灵活，所有活动都跨格式标准化
  • 全屏-支持本机全屏并回退到“全屏”模式
  • ⌨️ 快捷键-支持键盘快捷键
  • 画中画-支持画中画模式
  • Playsinline-支持playsinline属性
  • 速度控制-即时调整速度
  • 多个字幕-支持多个字幕轨道
  • i18n支持-支持控件国际化
  • 预览缩略图-支持显示预览缩略图
  • 没有框架-用“原生” ES6 JavaScript编写，不需要jQuery
  • ♀️ SASS-包含在您的构建过程中

快速开始

在html中直接使用

  • HTML5视频
<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" />

  
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
video>

注：封面图像应使用data-poster指定。这是为了防止它被下载两次。如果确定图像将被缓存，则仍可以使用poster属性进行真正的渐进增强。

  • HTML音频

在JavaScript中使用

import Plyr from \'plyr\';

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

或者

<script src="path/to/plyr.js">script>
<script>
  const player = new Plyr(\'#player\');
script>

CSS

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

总结

plyr是一个简单易用的浏览器端音视频播放器，在并不需要特别复杂的音视频场景是一个不错的选择！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/16426.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-11-30 07:24
下一篇 2020-11-30 16:05

相关推荐

发表评论

登录后才能评论