【Flask微电影】29.电影收藏功能，增加电影播放弹幕

个人博客，欢迎查看：https://blog.starmeow.cn/

Github地址：https://github.com/xyliurui/FlaskMovie

电影收藏功能

增加add_moviecollect电影收藏视图

@home.route('/moviecollect/add/')
@user_login_require
def add_moviecollect():
    movie_id = request.args.get('movie_id', '')
    user_id = request.args.get('user_id', '')
    movie_collect = MovieCollect.query.filter_by(
        user_id=int(user_id),
        movie_id=int(movie_id)
    )
    if movie_collect.count() == 1:
        data = dict(ok=0)
    if movie_collect.count() == 0:
        movie_collect = MovieCollect(
            user_id=int(user_id),
            movie_id=int(movie_id)
        )
        db.session.add(movie_collect)
        db.session.commit()
        data = dict(ok=1)
    import json
    return json.dumps(data)

修改play.html收藏电影功能和js

{% if 'login_user' in session %}
    <a class="btn btn-danger" id="btn-col">
        <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
    </a>
    <span id="show_collect_msg"></span>
{% endif %}

<script>
    $(document).ready(function () {
        $("#btn-col").click(function () {
            var movie_id = {{ movie.id }};
            var user_id = {{ session['login_user_id'] }};
            $.ajax({
                url: "{{ url_for('home.add_moviecollect') }}",
                type: "GET",
                data: "movie_id=" + movie_id + "&user_id=" + user_id,
                dataType: "json",
                success: function (res) {
                    if (res.ok == 1) {
                        $("#show_collect_msg").empty();
                        $("#show_collect_msg").append("收藏成功！");
                    } else {
                        $("#show_collect_msg").empty();
                        $("#show_collect_msg").append("已经收藏！");
                    }
                }
            })
        });
    });
</script>

image.png

后续也可以增加取消收藏功能。

弹幕功能

下载弹幕使用的js和css： https://github.com/MoePlayer/DPlayer 日期：2018年10月31日（随着更新，可能与教程不一样，需做一定的修改）

image.png

解压放在static目录下

修改play.html增加弹幕功能

image.png

去掉以前的jwplayer代码，然后引入弹幕的js和css

<!--播放页面-
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='jwplayer/skins/stormtrooper.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.all.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>
<script>
    SyntaxHighlighter.all();
</script>
播放页面-->

<!--弹幕-->
<link rel="stylesheet" href="{{ url_for('static',filename='DPlayer/dist/DPlayer.min.css') }}">
<style>
    /*弹幕*/
    .dplayer-comment-setting-type>label{
    display: inline;}
    /*弹幕*/
</style>
<!--弹幕-->



<div class="col-md-8">
    <!--<div id="moviecontainer"></div>--><!--去掉增加下面的行-->
    <div id="dplayer" style="height:500px;width: 774px;"></div>
</div>



<!--播放页面
<script src="{{ url_for('static', filename='jwplayer/jwplayer.js') }}"></script>
<script>
var ue = UE.getEditor('input_content',{
    toolbars: [
        ['fullscreen', 'emotion', 'preview', 'link']
    ],
    initialFrameWidth:"100%",
    initialFrameHeight:"100",
});
</script>
<script type="text/javascript">
    jwplayer.key = "P9VTqT/X6TSP4gi/hy1wy23BivBhjdzVjMeOaQ==";
</script>
<script type="text/javascript">
    jwplayer("moviecontainer").setup({
        flashplayer: "{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}",
        playlist: [{
            file: "{{ url_for('static', filename='media/' + movie.url) }}",
            title: "{{ movie.title }}"
        }],
        modes: [{
            type: "html5"
        }, {
            type: "flash",
            src: ".{{ url_for('static', filename='jwplayer/jwplayer.flash.swf') }}"
        }, {
            type: "download"
        }],
        skin: {
            name: "vapor"
        },
        "playlist.position": "left",
        "playlist.size": 400,
        height: 500,
        width: 774,
    });
</script>
播放页面-->

<!--弹幕-->
<script src="https://cdn.bootcss.com/flv.js/1.4.2/flv.min.js"></script>
<script src="https://cdn.bootcss.com/hls.js/0.10.1/hls.min.js"></script>
<script src="{{ url_for('static',filename='DPlayer/dist/DPlayer.min.js') }}"></script>

<script>
    // 播放页面js
    var dp = new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
            url: "{{ url_for('static',filename='media/'+ movie.url) }}",
            type: 'auto'
        },
        danmaku: {
            id: '{{ movie.id }}',
            api: "/tm/",
            user: "{{ session['login_user'] }}"
        }
    });
</script>
<!--弹幕-->

弹幕实现方式

打开 http://dplayer.js.org/#/ F12开启调试，点击NetWork，再点击XHR，就发现弹幕发送及加载数据的接口，弹幕是json字符串

image.png

后台处理弹幕功能

安装Flask-Redis：(FlaskMovie) C:\Users\LR>pip install flask-redis

修改app/__init__.py配置，增加redis的相关配置

我这使用了服务器的redis，项目进行中也使用了服务器的mysql，可根据自己的需求定制，格式如下

[redis-djangostarmeow]
host=xxx.xxx.xxx.xxx
port=6379
password=yourpassword

配置redis 的连接

import configparser

config = configparser.ConfigParser()
config.read(r'C:\ProjectConfig.ini')

# 配置redis
from flask_redis import FlaskRedis
app.config["REDIS_URL"] = 'redis://:{password}@{host}:{port}/1'.format(
    host=config['redis-djangostarmeow']['host'],
    port=config['redis-djangostarmeow']['port'],
    password=config['redis-djangostarmeow']['password'],
)
rd = FlaskRedis(app)

image.png

修改home/movies.py增加处理弹幕的视图

# 处理弹幕消息
@home.route("/tm/v3/", methods=["GET", "POST"])
def tm():
    from flask import Response
    from app import rd
    import json
    import datetime
    import time
    resp = ''
    if request.method == "GET":  # 获取弹幕
        movie_id = request.args.get('id')  # 用id来获取弹幕消息队列，也就是js中danmaku配置的id
        key = "movie{}:barrage".format(movie_id)  # 拼接形成键值用于存放在redis队列中
        if rd.llen(key):
            msgs = rd.lrange(key, 0, 2999)
            tm_data = []
            for msg in msgs:
                msg = json.loads(msg)
                # print(msg)
                tmp_data = [msg['time'], msg['type'], msg['date'], msg['author'], msg['text']]
                tm_data.append(tmp_data)
            # print(tm_data)
            res = {
                "code": 0,
                # 参照官网http://dplayer.js.org/#/ 获取弹幕的消息格式
                # "data": [[6.978, 0, 16777215, "DIYgod", "1111111111111111111"],
                #          [16.338, 0, 16777215, "DIYgod", "测试"],
                #          [8.177, 0, 16777215, "DIYgod", "测试"],
                #          [7.358, 0, 16777215, "DIYgod", "1"],
                #          [15.748338, 0, 16777215, "DIYgod", "owo"]],
                "data": tm_data,
            }
        else:
            print('Redis中暂无内容')
            res = {
                "code": 1,  # 无内容code为1
                "data": []
            }
        resp = json.dumps(res)
    if request.method == "POST":  # 添加弹幕
        data = json.loads(request.get_data())
        # print(data)
        msg = {
            "__v": 0,
            "author": data["author"],
            "time": data["time"],  # 发送弹幕视频播放进度时间
            "date": int(time.time()),  # 当前时间戳
            "text": data["text"],  # 弹幕内容
            "color": data["color"],  # 弹幕颜色
            "type": data['type'],  # 弹幕位置
            "ip": request.remote_addr,
            "_id": datetime.datetime.now().strftime("%Y%m%d%H%M%S") + uuid.uuid4().hex,
            "player": data['id']
        }
        res = {
            "code": 0,
            "data": msg
        }
        resp = json.dumps(res)
        rd.lpush("movie{}:barrage".format(data['id']), json.dumps(msg))  # 将添加的弹幕推入redis的队列中
    return Response(resp, mimetype='application/json')

image.png

当用户输入弹幕提交后，会记录到Redis中，同时显示到视频播放页面

image.png

当视频播放到发送弹幕的时候时自动显示弹幕内容。

[图片上传失败...(image-30ac65-1542031750660)]