经验分享

DPlayer弹幕播放器搭建教程(图文)

我的站长站 2023-05-26 人阅读

dplayer-node版本GitHub地址:https://github.com/MoePlayer/DPlayer-node,官方提供了部分安装方法,英文的,不会的接着看我的站长站的方法。

Docker安装

1、安装Docker

CentOS / Debian / Ubuntu 一键安装 Docker 的命令是一样的,都由 Docker 官方提供:

curl -sSL https://get.docker.com/ | sh

鉴于国内的网络问题,国内服务器可以用DaoCloud提供的代理安装服务:

curl -sSL https://get.daocloud.io/docker | sh

2、安装Docker Compose

curl -L https://github.com/docker/compose/releases/download/v2.13.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose

鉴于国内的网络问题,国内服务器可以用DaoCloud提供的代理安装服务:

curl -L https://get.daocloud.io/docker/compose/releases/download/v2.13.0/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose

3、运行镜像

安装git:

#Debian、Ubuntu系统
apt install git -y
#CentOS系统
yum install -y git
再使用命令:
#拉取源码
git clone https://github.com/MoePlayer/DPlayer-node.git
cd DPlayer-node
#重点来了,如果不作任何修改的话,直接运行镜像必定出错,因为镜像默认拉取mongo最新版,而DPlayer无法使用最新版的mongo数据库,所以这里我们要先修改一下。
vim docker-compose.yml
#编辑第五行image: mongo:latest为image: mongo:3.4.24#保存并退出,如果不会vim可以使用nano docker-compose.yml#然后执行接下来的步骤#新建镜像docker-compose builddocker-compose pull#拉取其它镜像并后台运行docker-compose up -d

此时api地址为http://ip:1207,数据和日志存放在/root/dplayer文件夹。

域名反代

如果你的博客已经开启了https访问,那api也需要https地址,所以只使用ip:端口是不行的,这里就需要使用域名反代了。博主喜欢CADdy,所以这里说下宝塔和Caddy反代,其它一键环境的建议看官方文档或自行搜索。

如果你服务器没有安装nginx/Apache的,可以用下Caddy,很方便很快,记得提前将域名解析到服务器。

1、宝塔反代

先进入宝塔面板,然后点击左侧网站,添加站点,然后再点击添加好了的域名名称,这时候就进入了站点配置,点击反向代理,目标URL填入http://127.0.0.1:1207,再启用反向代理即可。至于启用SSL就不说了,直接在站点配置就可以看到。

2、Caddy反代

安装Caddy:

wget -N --no-check-certificate https://raw.githubusercontent.com/iiiiiii1/doubi/master/caddy_install.sh && chmod +x caddy_install.sh && bash caddy_install.sh

配置Caddy:

#以下全部内容是一个整体,请修改域名后一起复制到SSH运行!
echo "xx.com {
tls admin@moerats.com
proxy / http://127.0.0.1:1207
}" > /usr/local/caddy/Caddyfile

tls参数会自动帮你签发SSL证书,如果你要使用自己的ssl,改为tls /root/xx.crt /root/xx.key即可。后面为ssl证书路径。

启动Caddy:

/etc/init.d/caddy start

反代好了后,你的API地址就为https://xx.com。

使用方法

安装完成,了播放器的调用HTML代码,代码如下:

<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.2.3/hls.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.27.0/DPlayer.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
<script>
var url="https://www.wdzzz.com/xx.mp4";    //这里填写视频地址
var id=md5(url);
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: url
},
danmaku: {
id: id,
api: 'https://dplayer.wdzzz.com/'    //这里填写弹幕地址
}
});
document.getElementsByClassName('dplayer-video dplayer-video-current')[0].removeAttribute('crossorigin'); //跨域
</script>