简介
DPlayer是一个支持弹幕的HTML5视频播放器。支持Bilibili视频和danmaku,支持HLS、FLV、MPEG DASH、WebTorrent以及其他视频格式,支持截屏、热键、切换清晰度以及字幕等。
安装
作者提供的弹幕后端搭建方法挺多的,这里选择一个搭建最快,版本最新的一种。
Github地址:https://github.com/MoePlayer/DPlayer-node
1、安装Docker
#CentOS 6 rpm -iUvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm yum update -y yum -y install docker-io service docker start chkconfig docker on #CentOS 7、Debian、Ubuntu curl -sSL https://get.docker.com/ | sh systemctl start docker systemctl enable docker.service
2、安装Docker Compose
curl -L https://github.com/docker/compose/releases/download/1.17.0/docker-compose-`uname -s`-`uname -m` -o /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
#新建镜像
docker-compose build
#拉取其它镜像并后台运行
docker-compose up -d
此时api地址为http://ip:1207,数据和日志存放在/root/dplayer文件夹。
当然如果你想其它端口,或者修改存放文件夹路径,那你在上面的新建镜像之前,作出如下操作:
#编辑DPlayer-node文件夹的docker-compose.yml文件,部分修改如下
mongo:
volumes:
- ~/dplayer/db:/data/db #数据库存放文件夹,~/dplayer/db为映射在外部的路径,自行修改,
web:
ports:
- 1207:1207 #api映射到外部的端口,将前面的1207修改成你想要的即可
volumes:
- ~/dplayer/logs:/usr/src/app/logs #同数据库操作
- ~/dplayer/pm2logs:/root/.pm2/logs #同上
改完后再新建镜像即可,如果你已经新建镜像了,但想改,那就清空之前的镜像再修改,方法参考→传送门。
域名反代
如果你的博客已经开启了https访问,那api也需要https地址,所以只使用ip:端口是不行的,这里就需要使用域名反代了。博主喜欢Caddy,所以这里说下宝塔和Caddy反代,其它一键环境的建议看官方文档或自行搜索。
如果你服务器没有安装Nginx/Apache的,可以用下Caddy,很方便很快,记得提前将域名解析到服务器。
配置Caddy:
#以下全部内容是一个整体,请修改域名后一起复制到SSH运行!
echo "xx.com { tls [email protected] proxy / http://127.0.0.1:1207 }" > /usr/local/caddy/Caddyfile
使用
作者提供了很多插件,这里列举一点:
Typecho:https://github.com/volio/DPlayer-for-typecho Hexo:https://github.com/NextMoe/hexo-tag-dplayer Z-Blog:https://github.com/fghrsh/DPlayer_for_Z-BlogPHP Discuz!:https://coding.net/u/Click_04/p/video/git WordPress:https://github.com/BlueCocoa/DPlayer-WordPress
不过Typecho插件暂时用不了,其它程序暂时不清楚,所以这里提供一个播放器的HTML代码,代码如下:
<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"></script> <script src="https://cdnjs.loli.net/ajax/libs/blueimp-md5/2.10.0/js/md5.min.js"></script> <script> var url="https://www.moerats.com/xx.mp4"; //这里填写视频地址 var id=md5(url); const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: url }, danmaku: { id: id, api: 'https://dplayer.moerats.com/' //这里填写弹幕地址 } }); </script>
演示
博主知道有人懒搭建的,所以这里提供个弹幕API地址:https://dplayer.moerats.com/。