【百度云搜索，搜各种资料:http://www.81ad.cn】
Flask 构建微电影视频网站
已上线演示地址: http://movie.tbquan.cn
电影收藏功能
增加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> 收藏电影
</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
后续也可以增加取消收藏功能。
弹幕功能
下载弹幕使用的js和css： https://github.com/MoePlayer/DPlayer 日期：2018年10月31日（随着更新，可能与教程不一样，需做一定的修改）
BLOG_20181112_220700_72
解压放在static目录下
修改play.html增加弹幕功能
BLOG_20181112_220741_33
去掉以前的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字符串
BLOG_20181112_220755_18
后台处理弹幕功能
安装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)
BLOG_20181112_220818_94
修改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')
BLOG_20181112_220832_68
当用户输入弹幕提交后，会记录到Redis中，同时显示到视频播放页面
BLOG_20181112_220849_62
当视频播放到发送弹幕的时候时自动显示弹幕内容。
BLOG_20181112_220855_90
网友评论