您现在的位置是: 网站首页 >Flask >Flask搭建微电影视频网站 Flask

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

admin2018年11月12日 22:06 Flask | Html | Python 526人已围观

Flask搭建微电影视频网站简介 利用Flask搭建微电影视频网站 Github地址:https://github.com/xyliurui/FlaskMovie

### 电影收藏功能 #### 增加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> ``` ![BLOG_20181112_220653_54](/media/blog/images/2018/11/BLOG_20181112_220653_54.png "博客图集BLOG_20181112_220653_54.png") 后续也可以增加取消收藏功能。 ### 弹幕功能 下载弹幕使用的js和css: https://github.com/MoePlayer/DPlayer 日期:2018年10月31日(随着更新,可能与教程不一样,需做一定的修改) ![BLOG_20181112_220700_72](/media/blog/images/2018/11/BLOG_20181112_220700_72.png "博客图集BLOG_20181112_220700_72.png") 解压放在static目录下 #### 修改play.html增加弹幕功能 ![BLOG_20181112_220741_33](/media/blog/images/2018/11/BLOG_20181112_220741_33.png "博客图集BLOG_20181112_220741_33.png") 去掉以前的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字符串 ![BLOG_20181112_220755_18](/media/blog/images/2018/11/BLOG_20181112_220755_18.png "博客图集BLOG_20181112_220755_18.png") #### 后台处理弹幕功能 安装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) ``` ![BLOG_20181112_220818_94](/media/blog/images/2018/11/BLOG_20181112_220818_94.png "博客图集BLOG_20181112_220818_94.png") 修改`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') ``` ![BLOG_20181112_220832_68](/media/blog/images/2018/11/BLOG_20181112_220832_68.png "博客图集BLOG_20181112_220832_68.png") 当用户输入弹幕提交后,会记录到Redis中,同时显示到视频播放页面 ![BLOG_20181112_220849_62](/media/blog/images/2018/11/BLOG_20181112_220849_62.png "博客图集BLOG_20181112_220849_62.png") 当视频播放到发送弹幕的时候时自动显示弹幕内容。 ![BLOG_20181112_220855_90](/media/blog/images/2018/11/BLOG_20181112_220855_90.png "博客图集BLOG_20181112_220855_90.png")

很赞哦! (2)

文章交流

  • emoji
0人参与,0条评论

当前用户

未登录,点击   登录

站点信息

  • 建站时间:网站已运行552天
  • 系统信息:Linux
  • 后台程序:Python: 3.6.6
  • 网站框架:Django: 2.2.9
  • 文章统计:219 篇
  • 文章评论:37 条
  • 腾讯分析网站概况-腾讯分析
  • 百度统计网站概况-百度统计
  • 微信公众号:扫描二维码,关注我们
返回
顶部
标题 换行 登录
网站