前言

哇,如此可爱的HTML5弹幕视频播放器

添加Dplayer

myblog/themes/Pjax/layout/includes/Butterfly中新建player.pugvideo.pug

参考图片

当前目录下复制layout.pug内容粘贴到player.pug

我们需要引入video.pug,在player.pug中添加

1
2
3
4
5
6
7
8
#body-wrap
if theme.background
- var is_photo = theme.background.startsWith('url') ? 'photo':'color'
#web_bg(data-type=is_photo)

include ./sidebar.pug
include ./header/index.pug
include ./video.pug

我们需要加载DPlayer文件,并且启用HLS支持

video.pug中添加

1
2
3
4
5
6
.card
.video
#dplayer
script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/hls.js@latest')
script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/MoePlayer/DPlayer@master/dist/DPlayer.min.js')
script(type='text/javascript', src='js/video.js')

myblog/themes/Butterfly/source/js中新建video.js

1
2
3
4
5
6
7
8
9
10
11
12
13
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: '',
type: 'hls',
},
pluginOptions: {
hls: {
// hls config
},
},
});
console.log(dp.plugins.hls); // Hls 实例

myblog/themes/Butterfly/layout/index.pug中修改

1
2
3
4
5
6
7
extends includes/player.pug

block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
+postUI
include includes/pagination.pug