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视频播放插件

已有 27 条评论

  1. Lopwon Lopwon   Windows 7 Windows 7   Google Chrome  Google Chrome

    已下载,改天试下,留言以表感谢。

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

      谢谢

    2. Lopwon Lopwon   Windows 7 Windows 7   Google Chrome  Google Chrome

      使用微信打开,显示有错误,感觉是微信内的浏览器过滤掉播放器

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

        使用常规现代浏览器即可,没做适配微信客户端等等适配,没必要。

  2. TaKe TaKe   GNU/Linux GNU/Linux   Safari Safari

    使用handsome主题,安装了这个插件,添加mp4播放代码进文章,无法显示,求修复

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

      这个你需要跟你主题作者联系,问问主题里是否自带了视频解析。

  3. ian ian   Mac OS X 10.13.6 Mac OS X 10.13.6   Google Chrome  Google Chrome

    我用HyperMD for typecho编辑器,开启插件后,在文章内加这段代码,但无法解析。

    显示效果就是添加的代码,多了一个;符号,MP4地址也一样。

    这个应该怎么操作?

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

      应该是冲突了,你试试换回默认的编辑器看看。

    2. ian ian   Mac OS X 10.13.6 Mac OS X 10.13.6   Google Chrome  Google Chrome

      自己试了一下,好像是markdown解析问题,我修改/var/HyperDown.php后,开启插件后,视频可以解析,但网站变得非常卡,pc和移动端都很难打开文章……

添加新评论