在flask项目中基于redis,使用Dplayer实现弹幕功能

1.下载Dplayer插件, 下载地址

https://github.com/menhood/DPlayer-Typecho

2.把插件解压, 将dplayer的文件夹放在项目的静态文件目录中

此处有坑！！！！

因为dplayer的弹幕默认在接口后面添加了 /v3，比如说项目的接口为https://xxx/xxx/xxx?id=1,但是经过dplayer发送的请求就成了https://xxx/xxx/xxx/v3?id=1,这样我们根本就无法获取到数据了。

解决方案：

修改dplayer中的DPlayer.min.js
把 文件内所有带/v3 的代码统统删除，解决问题。

3.导入css和js

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

 

4.添加样式

.dplayer-comment-setting-type>label{
    display: inline;
}

 

5.添加播放器

<!-- 播放器 -->
<div id="dplayer" style="height: 500px; width: 774px;"></div>

 

6.添加js弹幕

var dp = new DPlayer({
    element: document.getElementById("dplayer"),
    video: {
      url: "播放地址"
    },
    danmaku: {
      id: "电影id",
      api: "API地址"
    }
 })

 

7.案例

前端代码：

video.html

<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:'{{url_for('home.tm')}}'
 } }) 
</script> 
</body> 
</html>

后端代码：(使用redis将弹幕内容存入并读取)

此处需下载redis，并安装flask-redis

pip3 install  flask-redis

 在init文件中引入flask-redis：

__init__.py

from flask_redis import FlaskRedis
app.config["REDIS_URL"] = "redis://127.0.0.1:6379/0"
rds = FlaskRedis()
rds.init_app(app)

 

弹幕处理逻辑代码：

view.py

from app.home import home
from flask import render_template, current_app, request, flash, url_for, redirect, jsonify, Response

@home.route('/tm', methods=['POST', 'GET'])

def tm():
    import json
    import datetime
    import uuid
    if request.method == "GET":
        id = request.args.get('id')
        print("id:", id)
        key = "movie" + id
        if rds.llen(key):
            msgs = rds.lrange(key, 0, 2999)
            res = {
                "code": 1,
                "danmaku": [json.loads(v) for v in msgs]
            }
        else:
            res = {
                "code": 1,
                "danmaku": []
            }

    if request.method == "POST":
        # 添加弹幕
        data = json.loads(request.get_data())
        print("data:", data)
        msg = {
            # "__id": datetime.datetime.now().strftime("%Y%m%d%H%M%S") + uuid.uuid4().hex,
            "id": data['id'],
            "author": current_user.name,
            "time": data['time'],
            "text": data['text'],
            "color": data['color'],
            "type": data['type'],
            "ip": request.remote_addr
        }
        res = {
            "code": 1,
            "data": msg
        }
        # 弹幕写进redis队列
        rds.lpush("movie" + str(data["id"]), json.dumps(msg))
    resp = json.dumps(res)
    return Response(resp, mimetype='application/json')

 

posted on 2020-08-30 12:15  xufat  阅读(315)  评论(0)    收藏  举报

导航

/* 返回顶部代码 */ TOP