项目描述

使用 Flask 实现的简单网页视频播放器。
开发准备：Python3

功能简介

1. 在线视频播放
2. 视频列表浏览
3. 上传共享视频
4. 基于socket的多人弹幕评论

功能演示

项目结构

Vision
—— blueprints （注册蓝图）
—— sockets （内嵌 socket ，用于实现在线评论等功能）
—— static （静态资源目录）
———— css （ css 文件）
———— js （ javascript 文件）
———— img （静态图片资源）
———— image （视频缩略图）
———— video （视频源文件）
———— upload （保存视频格式文件）
—— templates （网页模板文件）
—— utils （功能文件夹）
—— app.py （系统启动文件）

1. 上传视频

• 定义/play/upload接口，用于提供上传视频页面。
• 定义/play/music/upload接口，用于网页通过POST请求上传视频到后台。

bp = Blueprint('play',__name__,url_prefix="/play")

@bp.route('/upload', methods=['GET'])
def upload():
    return render_template('play/upload.html')

@bp.route('/music/upload', methods=['POST'])
def doupload():
    id = random_name()

    # 下载视频
    video = request.files['video']
    video.save('static/video/' + id  + file_extension(video.filename))

    # 下载视频缩略图
    image = 'static/image/' + id + '.jpg'
    capture('static/video/' + id  + file_extension(video.filename), image)

    data = {
        "author": request.form["author"],
        "date": now(),
        "image": "/" + image,
        "video": "/static/video/" + id  + file_extension(video.filename),
        "title": request.form["title"]
        "description": request.form["description"]
    }
    # 保存视频格式化文件
    with open("static/upload/" + id + ".json", "w") as f:
        json.dump(data, f)

    return redirect(url_for('play.index'))

default.json（视频保存格式）：

{
 "author": "管理员",
 "date": "2019-03-21 15:33",
 "image": "/static/image/wsl.png",
 "video": "/static/video/wsl.mp4",
 "title": "一笑倾城",
 "description": "我想和你唱 汪苏泷"
}

提示：所有格式化文件均保存在upload文件夹中。

上传视频表单：

<form style="" name="form" method="post" action="{{ url_for('play.doupload') }}" enctype="multipart/form-data">
    <a style="float:right" href="{{ url_for('play.index') }}">返回</a>
    <ul>
        <li>
            <label>分享人：</label>
            <input type="text" name="author" placeholder="请输入用户名" onblur="checkna()" autocomplete="off" required/><span class="tips" id="divname">长度1~5个字符</span>
        </li>
        <li>
            <label>标题：</label>
            <input type="text" name="title" placeholder="请输入视频标题" onblur="checkpsd1()" autocomplete="off" required/><span class="tips" id="divpd1">长度1~20个字符</span>
        </li>
        <li>
            <label>视频：</label>
            <input type="file" name="video" accept="video/mp4" required/><span>请使用mp4格式</span>
        </li>
    </ul>
    <b class="btn"><input type="submit" value="提交"/>
    <input type="reset" value="取消"/></b>
</form>

2. 滚动弹幕评论

• 服务端

基于flask_socketio；
监听用户登录（connect）、登出（disconnect）状态；
一旦监听到用户评论信息（imessage），就向客户端广播 message 信息。

from flask_socketio import emit
namespace = "/comment"

@socketio.on('imessage', namespace=namespace)
def test_message(message):
    emit('message', {'data': message['data']}, broadcast=True, namespace=namespace)

@socketio.on('connect', namespace=namespace)
def connected_msg():
    """socket client event - connected"""
    socketio.emit('message', {'data': '系统消息：欢迎进入！！！'}, namespace=namespace)
    print('client connected!')

@socketio.on('disconnect', namespace=namespace)
def disconnect_msg():
    """socket client event - disconnected"""
    socketio.emit('message', {'data': '系统消息：有人离开了！！！'}, broadcast=True, namespace=namespace)
    print('client disconnected!')

• 客户端

基于socket.io.min.js ；
监听所有 message 信息，并提取内容产生滚动弹幕；
获取用户评论信息，并以 imessage 消息形式发送给服务端。

<script type="text/javascript" src="/static/js/socket.io.min.js"></script>
<script type="text/javascript">
    var namespace = '/comment';
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

    socket.on('message', function (msg) {
        $('body').barrager({'href': '#', 'info': $('<div/>').text(decodeURI(msg.data)).html()});
    });

    $("#comment").keypress(function (e) {
        if (e.which == 13) {
            socket.emit('imessage', {data: encodeURI($('#comment').val())});
            $('#comment').val('');
        }
    });
</script>

3. 项目启动入口

app.py：

from flask import *
from flask_socketio import SocketIO
from blueprints import play
from sockets import comment

app = Flask(__name__)
app.config['SECRET_KEY'] = '123456'

@app.route('/')
def index():
    return redirect(url_for("play.index"))

app.register_blueprint(play.bp)

socketio = SocketIO(app)
comment.register_comment(socketio)

if __name__ == '__main__':
    socketio.run(app, host='0.0.0.0', port=80, debug=True)

在命令行中执行python app.py，启动系统，如果提示有工具包未安装，使用pip install即可 。默认运行在80端口，你可以在浏览器中访问localhost或者电脑的局域网IP地址。启动成功后，赶紧把你的服务IP地址告诉小伙伴，一起交流分享视频资源吧！

完整项目代码可以在微信公众号【四元群】，后台回复「播放器」获取。