Dplayer实现弹幕功能

只因为你温柔

已于 2022-12-09 10:06:14 修改

阅读量7.7k

点赞数 1

分类专栏： # jQuery 文章标签：弹幕

于 2019-08-30 20:53:27 首次发布

本文链接：https://blog.csdn.net/zsx1314lovezyf/article/details/100165913

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用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>

只因为你温柔

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
5
评论
Dplayer实现弹幕功能

使用Dplayer实现弹幕功能下载Dplayer插件, blog地址https://download.csdn.net/my把插件解压, 放在项目中导入css和js—这里用的flask(看你用什么语言就用什么语言导入静态资源)<link rel="stylesheet" href="{{ url_for("static", filename="dplayer/dist...
复制链接

扫一扫