kn007的个人博客
♥ You are here: > > > 博客采用新的HTML5视频播放器DPlayer Lite

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

by | 47 Comments

博客目前采用新的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

donate
有所帮助?

Comments

47 Comments立即评论
Loading...
  1. 回复

    小白一个 想在站上放些视频 用自带的video 功能太呆了 快进都没办法 不知道博主有没有推荐的好用的视频插件

    1. MOD回复

      @哈哈: 暂时没有,这个说白,就是复制黏贴就能用上了。。再白,按步骤总会吧。。

  2. 回复

    我问一下,为什么我安装,提示没有找到此插件呢 :o

    1. MOD回复

      @AdoIL: 因为这不是插件啊。。。
      怎么感觉你们都要插件。。我回头再弄吧。

    2. 回复

      @kn007: 我们都是新手,搞不懂这些些东西,等作者大大,希望作者大大出一个插件,支持多P视频的最好咯 :cry:
      麻烦作者大大了 :mrgreen:

  3. 回复

    大佬 请问支持webtorrent么

    1. MOD回复

      @BanYuner: 支持。

    2. 回复

      @kn007: 请问标准的使用格式是什么样的呢?

    3. MOD回复

      @BanYuner: 详见原版DPlayer文档。

  4. 回复

    博主请问WordPress怎么整合安装全新的DPlayer播放器呀?

    1. MOD回复

      @小李: 什么意思?
      我这不是有调用代码么。。
      还是说你需要原版的什么功能?

    2. 回复

      @kn007: 博主你好,我从https://github.com/MoePlayer/DPlayer/ 下载了官方的DPlayerv1.24.0版本,想在WordPress上面整合来用。请问怎么做哦? 不是用您这个版本的。

    3. MOD回复

      @小李: 用我的代码,兼容原版啊。

    4. MOD回复

      @小李: 而且DPlayer Lite也是1.24.0版本啊。。甚至比原版新点

    5. 回复

      @kn007: 嘿,感谢指点,我试试。谢谢博客开源

    6. 回复

      @kn007: 你好,小白看了半天还是不太懂呀。
      我下载了您的DPlayer Lite解压放的主题根目录,然后新建一个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="MP4地址" poster="Mp4图片" type="auto" mutex="true" iconsColor="#ffffff"]
      调用发布,可网站前台并不显示视频,博主请问我哪步错了吗?能教教我吗,我是个新手小白。谢谢你

    7. MOD回复

      @小李: 看github,文章一开始就说了。

    8. 回复

      @kn007: 能给份写好的class.dplayer.php代码给我参考一下吗,谢谢

    9. MOD回复

      @小李: github有代码。

    10. MOD回复

      @kn007: 文首的github,有个DPlayerHandle的链接。

      中间也有DPlayerHandle的github链接,里面就有class.dplayer.php

      不过默认是调用原版的,你需要改下第32行。改成本地的DPlayer Lite就行了

  5. 回复

    每次只能播放一个播放视频?可不可以把几个视频调用一个播放器?第一集/第二集这样

  6. 回复

    :o 主题无法匹配点都不好乱了,已试毒小白可以远离此地了,只适合会代码的人用的,分都分享出来了,不想别人用何必拿出来,教程也是模糊模糊的,都不知道做成一个插件?不知道你们的用心是怎样,看了一大堆国内插件,大多都是假分享出来,全是都是一些代码,教程几句装逼么我想说真的是,最重要的是播放列表从来都不知道加,估计是因为免费分享所以没有这玩意留着自己用

    1. MOD回复

      @666666: 自己技术不行,就别BB,有能力自己干,伸手党有什么好指责人的?

    2. @kn007: 没你技术行

    3. @kn007: 没你技术行,装不完的逼,还指责别人伸手党,那你分享干嘛,直接把文章删掉不就好了,别人没给你钱的原因?

    4. MOD回复

      @呵呵呵呵: 哟,还想立牌坊啊?

      看不懂,就别来看了。浪费你我时间。

    5. MOD回复

      @呵呵呵呵: 不想别人用那为啥还分享?就是想别人用才分享的。
      我分享出来就是针对会用的人,你不会用就代表我不想给别人用? :grin:

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif