使用Dplayer实现弹幕功能(后台是Python)
-
下载Dplayer插件, blog地址
https://download.csdn.net/download/zsx1314lovezyf/11645186
-
把插件解压, 放在项目中
-
导入css和js—这里用的flask(看你用什么语言就用什么语言导入静态资源)
<link rel="stylesheet" href="{{ url_for("static", filename="dplayer/dist/DPlayer.min.css") }}"> <script src="{{ url_for("static", filename="dplayer/plugin/flv.min.js") }}"></script> <script src="{{ url_for("static", filename="dplayer/plugin/hls.min.js") }}"></script> <script src="{{ url_for("static", filename="dplayer/dist/DPlayer.min.js") }}"></script>
-
添加样式
.dplayer-comment-setting-type>label{ display: inline; }
-
添加播放器
<!-- 播放器 --> <div id="dplayer" style="height: 500px; width: 774px;"></div>
-
添加js弹幕
var dp1 = new DPlayer({ element: document.getElementById("dplayer1"), video: { url: "播放地址" }, danmaku: { id: "电影id", api: "API地址" } })
案列
-
前端代码
<html> <head> <link rel="stylesheet" href="{{ url_for("static", filename="dplayer/dist/DPlayer.min.css") }}"> <script src="{{ url_for("static", filename="dplayer/plugin/flv.min.js") }}"></script> <script src="{{ url_for("static", filename="dplayer/plugin/hls.min.js") }}"></script> <script src="{{ url_for("static", filename="dplayer/dist/DPlayer.min.js") }}"></script> <style> .dplayer-comment-setting-type>label{ display: inline; } </style> </head> <body> <!-- 播放器 --> <div id="dplayer" style="height: 500px; width: 774px;"></div> <script> // 弹幕js var dp1 = new DPlayer({ element: document.getElementById("dplayer"), video: { // 视屏地址 url: "{{ url_for("static", filename="uploads"+movie.url) }}" }, danmaku: { id: "{{ movie.id }}", api: 'https://dplayer.moerats.com/' } }) </script> </body> </html>