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

### 电影收藏功能 #### 增加add_moviecollect电影收藏视图 ```python @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 ```html {% 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> ```  后续也可以增加取消收藏功能。 ### 弹幕功能 下载弹幕使用的js和css： https://github.com/MoePlayer/DPlayer 日期：2018年10月31日（随着更新，可能与教程不一样，需做一定的修改）  解压放在static目录下 #### 修改play.html增加弹幕功能  去掉以前的jwplayer代码，然后引入弹幕的js和css ```html <!--播放页面- <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字符串  #### 后台处理弹幕功能 安装Flask-Redis：`(FlaskMovie) C:\Users\LR>pip install flask-redis` 修改`app/__init__.py`配置，增加redis的相关配置 我这使用了服务器的redis，项目进行中也使用了服务器的mysql，可根据自己的需求定制，格式如下 ```ini [redis-djangostarmeow] host=xxx.xxx.xxx.xxx port=6379 password=yourpassword ``` 配置redis 的连接 ```python 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) ```  修改`home/movies.py`增加处理弹幕的视图 ```python # 处理弹幕消息 @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') ```  当用户输入弹幕提交后，会记录到Redis中，同时显示到视频播放页面  当视频播放到发送弹幕的时候时自动显示弹幕内容。 

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/f033ab37c30201f73f142449d037028d/

很赞哦！ (4)