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

Plyr

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

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 官网样式同步。

使用 Plyr HTML5 样式：

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

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

下载地址：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>

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

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

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

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

更新记录：

须知：已转 Wordpress，不再更新此插件！