提醒:本文最后更新于 2513 天前,文中所描述的信息可能已发生改变,请仔细核实。
博客目前采用新的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》
大佬,有2个问题,我是在wordpress使用你的DPlayerHandle
1)如何实现没有缩略图的视频给他添加默认的缩略图,我试着在代码的'poster' => 'https://xxx.jpg',不过好像没啥用
2)我在编辑器可视化界面,通过快捷代码的方式Dplayer是直接出现一个类似与添加多媒体的弹框,而不是像在编辑器html界面那样的短代码,这是为何?
@如丶果: 1.原版有限支持
2.不用可视化界面
追加一条,有没有可能实现通过ffmepg实现对在线媒体实现九宫格截图作为视频的预览图
求助大佬,视频在首页加载怎么搞?我改成这样好像还是不行。。。
if ( !is_singular() && !is_admin() && !is_category() && !is_home() && !is_page() ) return;
好像不兼容火狐浏览器啊
太恐怖了,这对小白压力实在是大,整整研究了一个晚上才搞出来,我滴天~~~不管怎么样,出来了,谢谢博主的分享~~~
亲,咨询个问题,播放器的高和宽在那个文件设置呢呀,我上传了一个抖音的视频后,它就变得那么那么的大彻底的变形了!
@moi: 没考虑过这个问题。。
你可以通过div套css规定长宽,然后里面套DPlayer
@kn007: 谢谢,昨天早上以解决,谢谢你的分享~谢谢……
现在使用直接
此站点遇到了致命错误。