博客采用新的HTML5视频播放器DPlayer Lite

分类:博客 热度:

博客目前采用新的HTML5视频播放器,DPlayer Lite,Github传送门。

DPlayer Lite基于DPlayer 1.17.1 5207d26定制,没有弹幕、截图、画质选择、进度条预览、字幕功能,UI和一些代码逻辑也有少许变化,效果可见下图。

DPlayer Lite (Based on DPlayer 1.17.1 5207d26) :

  • Streaming Formats
    • HLS
    • FLV
    • DASH
  • Media Formats
    • MP4 H.264
    • WebM
    • Ogg Theora Vorbis
  • Features
    • Hotkeys
    • Loop Control Button

DPlayer这块要感谢DIYgod的开源,Github传送门。也是基于此,才有了DPlayer Lite。

DPlayer的定位相对较高,功能齐全。而DPlayer Lite目的是满足日常个人使用,在保证基础功能的前提上,尽量压缩js大小。

DPlayer目前采用的js、css分离模式,总大小110.7K;而DPlayer Lite采用的是单一js模式(js含css),大小41.8K,只有原始大小的38%不到。

播放器实际效果可见文章《Legends Never Die》。


接下来介绍下DPlayerHandle,其功能跟之前的APlayerHandle基本相似,可以非常简单的在WordPress上使用DPlayer或DPlayer Lite。

DPlayerHandle主要是为DPlayer Lite服务,但同样也兼容DPlayer,只不过可控制功能比较少,需要的话可以自行修改代码,添加相关参数来支持。

同APlayerHandle一样,开源在Github上:https://github.com/kn007/DPlayerHandle

已将函数封装成class类,将class.dplayer.php文件保存在主题根目录,然后在functions.php调用就好了。调用方法如下:

class_exists('DPlayerHandle') or require(get_template_directory() . '/class.dplayer.php');
$dplayer = new DPlayerHandle;
$dplayer->init();

文章调用短代码方法:

[dplayer autoplay="false" theme="#b7daff" loop="false" preload="auto" src="http://devtest.qiniudn.com/若能绽放光芒.mp4" poster="http://devtest.qiniudn.com/若能绽放光芒.png" type="auto" mutex="true" iconsColor="#ffffff"]

以上[dplayer]标签参数出src及poster均为默认值。

支持原生[video]标签,前提是增加dplayer参数,并且视频地址使用src参数。兼容AMP页面。

逻辑与原生[video]标签一致,但没有class和style参数,功能与[dplayer]标签一致。

Video短代码调用方式示例:

[video dplayer="true" src="http://devtest.qiniudn.com/若能绽放光芒.mp4" poster="http://devtest.qiniudn.com/若能绽放光芒.png"]

注意,我定义了默认只在文章页和后台按需加载DPlayer,其他比如首页这些并不会加载,有需求自己改代码第53行。

至于为什么有dplayer_extension这个函数,本来按逻辑是不需要的。

但苦逼的是WordPress的wp_enqueue_script在shortcode这个循环中,wp_head已经被执行了,所以后面加载的js不管原定的位置在哪,都在wp_footer中加载。

如果能在head加载js,我就让HLS、FLV、DASH扩展按需在head加载,DPlayer留在footer加载,这样就保证DPlayer在它们之后加载。

所以我用了这个方法,先加载DPlayer,如果用户端需要调用扩展,那么先反注册DPlayer,然后加载扩展再重新加载DPlayer。

因为这些都是页面输出前的逻辑,所以并不影响最终效果。不过这样也好,这样做了之后,所有的js都是在末尾加载。

转载请注明转自:kn007的个人博客的《博客采用新的HTML5视频播放器DPlayer Lite》

上一篇:[专辑]LPCD45陈果经典金曲发烧版 下一篇:年末将至,聊聊博客的一些事
猜你喜欢
热门排行
精彩图文
  • 据说这篇文章能解决熊掌号80%的收录疑惑
    据说这篇文章能解决熊掌号80%的收录疑惑
    最近我们可爱的客服反馈经常收到这样的问题:数据到底有没有被收录,去哪里能看到?为什么我的熊掌号收录成功了,但是在熊掌号首页没有展现呢?熊
  • 明日复明日,明日何其多
    明日复明日,明日何其多
    做项目也好还是学习东西,其实都是需要坚持,很多时候只要在坚持那么一段时间预期的效果就可以达到,但是很多人都是用明天吧,回头在弄,来给自己
  • 超实用12个分享WordPress技巧和教学的网站
    超实用12个分享WordPress技巧和教学的网站
    WordPress可算是数一数二的内容管理系统,全世界最top的1000万个网站,其中27.5%都采用这款屡获奖项的软件。不少业界的网站都必定与WordPress有关係,我们公
  • 31天建好一个博客
    31天建好一个博客
    建立一个更好的博客31天是一个由我们的Darren Rowse(他的着名博客ProBlogger)的好朋友和导师的电子书。 最近我们收到很多电子邮件来推荐图书,我们意识到
  • 修复Windows 10 1709更新完,CPU占用高
    修复Windows 10 1709更新完,CPU占用高
    一直CBB+延迟更新,今天才更新到Windows 10 1709(16299.64)。 更新完后,CPU占用高,使得机子升温,风扇加速。 现象:显示有3个分组CPU占用高,分别是“服务主