Typecho Plyr HTML5 自适应本地 mp3/mp4 播放插件

20180925223901.png

Plyr

简单,轻便,可访问且可自定义的HTML5,YouTube和Vimeo媒体播放器,支持现代浏览器。

Features

  • Accessible - full support for VTT captions and screen readers
  • Customisable - make the player look how you want with the markup you
    want
  • Good HTML - uses the right elements. <input type="range">for volume
    and <progress>for progress and well, <button>s for buttons. There's
    no <span> or <a href="#"> button hacks
  • Responsive - works with any screen size
  • HTML Video & Audio - support for both formats
  • Embedded Video - support for YouTube and Vimeo video playback
  • Monetization - make money from your videos
  • Streaming - support for hls.js, Shaka and dash.js streaming playback
  • API - toggle playback, volume, seeking, and more through a
    standardized API
    ······

更多详情请访问 plyr 官网:https://plyr.io

上诉官方说明了支持哪些元素特征,比如支持API,字幕等等特征,基本的HTML5控制标签都支持,如果您需要其他的控件元素支持,请参考开源项目自行添加标签:https://plyr.io

由于之前本人使用过羽中的视频播放插件,但是有个致命的缺陷,那就是不能完全自适应,在某些设备上错位很严重,而且有些主题或者设备不能完全全屏播放,影响体验!自己尝试过修改源码,但由于是高度集成,修改起来吃力麻烦,放弃!

后来使用的是原生自带的HTML5元素控件代码来播放视频,控件样式体验很糟糕,视频中间大大的一个播放按钮看起来真的丑到爆,时间线样式也很难看,无意间搜索到 Plyr HTML5 看到它的默认播放界面真的很好看,今天抽空把官方提供的JS文件和CSS文件整合了,制作了一个插件。

既然官方提供了 MP3 播放源码,就一起集成了 MP3 音频播放和 MP4 视频播放功能,整合了其它控件元素,基本上保持与 Plyr 官网样式同步。

使用 HTML5 原生样式:

20180926000103.png

使用 Plyr HTML5 样式:

20180926001558.png

MP3 和移动端效果不提供预览,我自己测试时效果很棒,您可自行测试。

是不是马上觉得使用 Plyr HTML5 样式好看多了?如果您喜欢,就往下看吧。

功能:

  • PC 端与手机端自适应。
  • 与 Plyr 官方控件样式同步。
  • 只需一个插件,即可播放MP3/MP4。

安装:

下载地址:Plyr

下载之后自行上传到 Typecho 插件目录修改插件名为:plyr 并启用。

使用:

MP4:

<video src="https://xxx.com/xxx.mp4"></video>

带封面:

<video poster="https://xxx.com/xxx.jpg" src="https://xxx.com/xxx.mp4"></video>

MP3:

<div><audio src="http://xxx.com/xxx.mp3"></audio></div>

预览效果:https://inwao.com/Unbroken.html

注:此插件已集成 HTML 5 基本按钮元素控件,无需像原生 HTML 5 一样还要写入元素控件,只需一个视频地址即可播放。

由于设置了不自动播放,想设置MP3自动播放的,请添加自动播放 autoplay 标签或者修改源码 autoplay 标签。

目前仅在 Typecho1.0 测试OK,理论支持所有正式版与开发版,并没有加入 Youtube 与优酷、腾讯等在线视频功能,Youtube 被屏蔽,腾讯和优酷视频都有广告,只测试了本地视频播放,如您有兴趣,也可自己加入测试。

由于我设置了自适应,就不需要添加宽高元素了,如与原生元素发生冲突,保留带封面元素再删除其它元素控件,如果还需要添加其他的元素控件,请参考:https://github.com/sampotts/plyr

更新记录:

  • 加入播放速度功能。 9/25
  • 修改默认自动预加载,但不自动播放。 9/25
  • 修复同一篇文章不能播放两个视频,自动 Plyr 初始化。 9/26
  • 播放代码细节优化。9/29

标签: plyr.js, typecho plyr.js, typecho plyr视频播放插件

已有 26 条评论

  1. 猫屎咖啡 猫屎咖啡   Mac OS X 10.14.0 Mac OS X 10.14.0   Google Chrome  Google Chrome

    一个页面只能放一个视频,第二个视频无效

    1. Cyclists站长 Cyclists   Windows 10 Windows 10   Google Chrome  Google Chrome

      已修复,经测试可用。

  2. MR MR   Windows 10 Windows 10   Google Chrome  Google Chrome

    plyr无法下载!下载显示0kb

    1. Cyclists站长 Cyclists   Windows 10 Windows 10   Google Chrome  Google Chrome

      已修复,昨晚上传的时候没注意,太困了。

添加新评论