Typecho 的 DPlayer 插件在 VOID 主题下的兼容性测试 - 薛之谦 - 《演员》mv
2020/1/13 更新
感谢 熊猫小A 的提醒，看到确实有位仁兄 himiku 使用 VOID 主题同时使用 DPlayer 视频+弹幕播放器插件，视频加载成功。 参考页面 Pixiv 第三方客户端「Shaft」 - 初之音。
对比两者的插件发现，引入的 DPlayer.js 版本不一致。F12 调试页面 console 栏可以看到，我加载的 1.25.0 版本，而 himiku 加载的是 1.5.0 版本；我是从 MoePlayer/DPlayer-Typecho: Typecho plugin for DPlayer 下载的插件，版本 1.0.3，从对方引用的 js 目录来看，应该同源。
今天再次去找文档对比的时候，发现作者刚刚（16 个小时前）又发布了 1.1.0 版本，主要更新内容：support pjax。
这时候摆在面前的有两个选择方案：
- 尝试修改现有的插件，将引入的 DPlayer.js 版本改成更高的 1.5.0
- 将 DPlayer-Typecho 插件更新到最新的 1.1.0 版本
尝试第一个选择项，先去搜索 DPlayer 的官网 http://dplayer.js.org/，通过官网跳转到 github 上，发现就是跟我下载的插件作者是同一人 DIYgod。让人惊奇的是，最新的 DPlayer 版本为 1.25.0。
这不科学。
研究了一下 himiku 这位仁兄引入的文件（F12 调试页面 sources 栏），发现里面有一个 webpack:// 来源目录，里面的 ./src 下的 DPlayer.js cosole.log 输出了这一版本号。
console.log('%c DPlayer 1.5.0 %c http://dplayer.js.org ', 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;');另一个发现也比较不寻常。插件所在目录 /usr/plugins/DPlayer 下又嵌了一级目录 dplayer。尝试建立相同目录结构发现，Typecho 无法识别插件，提示 “此插件文件已经损坏或者被不安全移除, 强烈建议你禁用它”。
综上两点大胆猜测，himiku 是对 DPlayer 项目进行了二次开发，没有使用 DPlayer-typecho 插件。但 webpack 为什么没有最终把所有 js 文件打包成一个文件包？存疑。
看 himiku 引入 js 的比较混乱，决定暂时不去白嫖。
尝试第二个方案，升级 DPlayer-typecho 插件到最新的 1.1.0 版本。
下载安装包，解压，删除线上版本，上传，启动插件，哎呦，不错哦，竟然直接好了。
开心！ ヾ(≧∇≦*)ゝ
开心之余，找找原因：
v1.0.4 remove local dplayer source
将需要的 dplayer 本地资源改成线上资源，所以这个版本之后 dist 文件夹下的 DPlayer.min.css、DPlayer.min.js 文件就不需要了，将 init-dplayer.js 文件名改成 util.js 。
v1.1.0 support loop and screenshot
这就已经到 1.1.0 版本了，支持循环播放和屏幕截图参数定义。
这一步也没改什么，只是支持从后台定义参数而已。
v1.1.0 support pjax
这是最新的提交了，所以对于 VOID 主题的兼容肯定体现在这一步了。
支持 pjax。对于 pjax 大概知道有这么个技术，可以让页面无刷新加载，是用来提升用户体验的。
到这一步，dist 文件夹就没了，资源都统一到了 assets 文件夹下。其他文件诸如 Plugin.php、edit.js 都是小打小闹，什么修改变量名，修改 json 化方法。那么就只剩下唯一的点了，那就是新增加的一个 player.js 文件。
料想这应该就是他说的 支持 pjax 的功能点了。以下为 player.js 内容：
var dPlayers = [];
var loadDPlayer = function () {
var load = function (d, conf) {
conf.container = d;
dPlayers.push(new DPlayer(conf));
};
for (var i = 0; i < dPlayers.length; i++) {
dPlayers[i].destroy();
}
dPlayers = [];
for (var j = 0, k = document.querySelectorAll('.dplayer'); j < k.length; j++) {
load(k[j], JSON.parse(k[j].dataset.config));
}
};
document.addEventListener('DOMContentLoaded', loadDPlayer, !1); 结合 README.md 里新增额说明，就更加明确了：
#### 1. Pjax页面切换？
重新加载播放器回调函数
#```
...
loadDPlayer();
#```
不太确定这是不是 pajx 写法，但大概问题就在这了。
测试内容
测试当前主题对 Dplayer 视频播放插件的兼容性
Dplayer 启用后会在 MD 编辑器工具栏多一个插入视频功能的按钮。
以下为 《演员》 mv 视频播放测试内容：
[dplayer url="https://www.seasidecrab.com/src/video/yanyuan.mp4" pic="https://www.seasidecrab.com/usr/uploads/2020/01/1716682237.jpg" danmu="false" /]
测试结果
通过开启和关闭当前的 VOID 主题发现：
| 主题 | MD 编辑器 | 详情页展示 | |
|---|---|---|---|
| 默认主题 | 工具栏多一个插入视频功能的按钮 | 视频正常播放 | |
| VOID | 无 | 不显示视频内容 |
在作者博客里找了一篇主题相关的文章 VOID：现在可以公开的情报，作者还提到了 DPlayer。说本来是有考虑的，但听别人讲 DPlayer 主要用在盗版站和小黄站上，直接放弃了，觉得个人博客还是纯粹一点好。
VOID 主题对视频、音频不支持（视频插件 DPlayer 升级到最新版本，可支持），版面布局还放弃了默认模板里的热门文章等等内容，对其他插件适配性也不太好。因为是默认引用了 jQuery，所以还存在与其他同样默认引入 jQuery 插件的冲突的情况。对于 PHP 5.6 及以下版本可能会存在 bug 等等。
去看了一些 typecho 的模板，包括商用模板，对比了一下，觉得 VOID 在免费模板里算不错的了。不能 DIY，那就这样用吧！