前言

作者今天看到了糖果屋的一篇文章 DIY外挂标签的简单写法与应用 就突发奇想的想给Dplayer写个标签外挂(其实是想以后的时候偷懒)

教程

在博客根目录下新建scripts文件夹(已建立的不用重复建立)

新建一个随意名称的文件(后缀要是.js)比如diytag.js

填入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//参数处理函数
function dplayer (args, content) {
// args = args.join(' ').split(',')
// const div_id = args[0]
// const div_id = args[1]?args[1]:p0
const div_id = args
html = `<div id="${div_id}">播放器加载中......</div>
<script>
//立即执行函数
(
function () {
import('https://jsd.cxl2020mc.top/npm/dplayer/+esm')
.then((module) => {
// Do something with the module.
// const ${div_id} = new DPlayer({
const Dplayer = module.default
const ${div_id} = new Dplayer({
container: document.getElementById('${div_id}'),
${content}
});
});
}
)();
</script>`
return html
}
//标签注册函数
hexo.extend.tag.register('dplayer', dplayer, { ends: true });

然后你就可以在文章里用标签外挂的方法使用deplayer了
(记得先在head引入Dplayer)

1
2
3
4
5
{% dplayer dplayer %}
video: {
url: 'https://file.cxl2020mc.top/api/raw/?path=/mc1.mp4',
}
{% enddplayer %}

参数

参数dp表示播放器对象名称
参数dplayer表示播放器的容器id
所有参数在一个文章中不能出现2个相同的

演示

1
2
3
4
5
{% dplayer dplayer %}
video: {
url: 'https://lc-gluttony.s3.amazonaws.com/eABALL5rKFsL/n66RHPuNklJeNRlEgYOPdkCoO2MEJ7HR/fd431739ff26ceeb3010ac561d68446b_345688670889091949.mp4',
}
{% enddplayer %}
播放器加载中......

高级演示

支持切换清晰度(不过给我用成切换视频节点了),默认第1个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% dplayer dplayer2 %}
video: {
quality: [
{
name: 'od',
url: 'https://file.cxl2020mc.top/api/raw/?path=/video/%E5%8E%9F%E7%A5%9E%E5%AE%98%E6%96%B9%E5%AE%A3%E4%BC%A0%E7%89%87.mp4',
},
{
name: 's3',
url: 'https://lc-gluttony.s3.amazonaws.com/eABALL5rKFsL/n66RHPuNklJeNRlEgYOPdkCoO2MEJ7HR/fd431739ff26ceeb3010ac561d68446b_345688670889091949.mp4',
},
],
defaultQuality: 0,
}
{% enddplayer %}
播放器加载中......