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

提醒：本文最后更新于 2566 天前，文中所描述的信息可能已发生改变，请仔细核实。

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