Redsunset!Group Blog
望夕阳 一片红 搞大伟 闹青楼
在WordPress中插入dplayer!去他*的插件
在WordPress中插入dplayer!去他*的插件

说在前面

操操操操操操玄学啊啊啊***nmsl

@maple-leaf

自从我搞上CTList之后,就想搭建一个视频站了,搞来搞去还是博客里香(凑字数方便),dplayer除了玄学对于字幕与弹幕支持还是很香的,之后我就走上了折腾dplayer的不归路……

一些wordpress插件引入了dplayer,但我在实际使用中都没法正常使用,除了DPlayerHandle,但DPlayerHandle功能很不完善,阉割了许多dplayer的功能,例如字幕……虽然我现在还是没法使用字幕,因为dplayer 的玄学问题

正文

准备工作

  1. 一个Wordpress博客,其他博客的方法也与之类似(typecho除外,因为又有玄学错误)。
  2. 掌握基础html与javascript的使用方法。(自己搜一搜吧,网上教程很多,找一个适合自己的就行)
  3. 大把时间,因为你需要时间与bug还有玄学作斗争。

插入css,js等支持库

注意
keyboard_arrow_down

以wordpress 5.4.2为例

  1. 在wordpress中新建一个文章或页面。
  2. 寻找编辑文章或页面的界面的菜单(文章编辑器界面),有三个点的,点一下,选择代码编辑器。
  3. 你可以将下方代码复制,然后粘贴到代码编辑器
<link href="https://www.moerats.com/usr/dplayer/DPlayer.min.css" rel="stylesheet">
<div id="dplayer"></div>
<script src="https://www.moerats.com/usr/dplayer/DPlayer.min.js" type="e2a6a04b0521759aac7da853-text/javascript"></script>
<script src="https://cdnjs.loli.net/ajax/libs/blueimp-md5/2.1.0/js/md5.min.js" type="e2a6a04b0521759aac7da853-text/javascript"></script>

插入视频信息

这里需要使用javascript来实现播放器

  1. 复制下列代码,将其粘贴到刚刚引入的css与js后面
  2. 在url 后面的””中填写你的视频直链,注意必须是直链!
  3. 保存,然后试试看是否能顺利播放
<script type="e2a6a04b0521759aac7da853-text/javascript">
var url="";    //这里填写视频地址
var pic="https://ylypan.oss-cn-chengdu.aliyuncs.com/20200530%2F2%2F2_seLfYxeO_147d0c4d635f30ec295755b0d485836c-01.jpeg?Expires=1592110690"
var id=md5(url);
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
autoplay: false,
    video: {
        url: url,
        pic: pic,
        
  },
  
  danmaku: {
        id: id,
        api: 'https://dplayer.moerats.com/'    //这里填写弹幕地址
    }
});
</script>

更多参数选项请参照dplayer官方文档说明来更改

后话

哦,我的上帝啊,这该死的玄学问题,我发誓我会狠狠地盘它的–如果能盘到的话……

我遇到的玄学问题

  1. 只要是外部链接,都无法被写入到视频配置里面,只能另开js,用变量定义……作者的锅,而且作者也已经注明……
  2. 只能播放mp4文件……mkv文件我只能听到声音,屏幕确是黑的……Dplayer 是支持mkv的我就是个憨憨,不支持mkv
  3. 只要配置外挂字幕,不管字幕有没有用,只要有字幕这个配置参数(启用字幕),视频就直接显示加载失败……
  4. 在wordpress 里如果用经典区块编辑,那么在引入一个css时编辑系统会自动把其删去……所以只能用代码编辑器……
  5. 还有更多玄学……玄学无止境

在您进行浏览本站及转载等行为时即代表您同意 条例与隐私协议
没有标签
首页      科技教程      干货技巧      在WordPress中插入dplayer!去他*的插件
Xinzhi Wang

Xinzhi Wang

文章作者

落日余晖团队前端维护,一个小菜鸡

发表评论

textsms
account_circle
email

落日余晖团队博客

在WordPress中插入dplayer!去他*的插件
说在前面 操操操操操操玄学啊啊啊***nmsl@maple-leaf 自从我搞上CTList之后,就想搭建一个视频站了,搞来搞去还是博客里香(凑字数方便),dplayer除了玄学对于字幕与弹幕支持还是很…
扫描二维码继续阅读
2020-06-14