家里攒了一堆电影资源,有自己拍的短片、收藏的老片,还有买碟抓轨出来的内容,存在NAS上想随时看,网上找了一圈播放器方案,要么是闭源全家桶太重,要么是付费,要么根本管不住字幕和外挂音轨。后来索性自己动手,用Python Flask搓了一个电影视频播放器平台,前前后后折腾了半个月,从本地跑通到Docker部署上线,把HTTP流媒体、分片传输、元数据管理、播放器集成这些全摸了一遍。这篇文章就把整个项目的设计思路和落地过程完整拆给你,代码和坑都会提到,适合有一定Python基础、想用Flask做个真实Web项目的读者,也适合那些手里有大量视频文件、想搭私有影音库的人参考。
先说清楚定位:这不是一个盗版分发系统,而是把你自己有权的视频资源(个人拍摄、公版电影、已购数字文件)管理起来,在自己局域网或私人服务器上访问。平台用Flask做后端,前端用HTML + DPlayer播放器,数据存SQLite/MySQL,视频文件走HTTP流式传输。整套东西不复杂,但把Web开发里最容易被忽略的流媒体原理、大文件传输、部署性能问题都涉及了。
1. 为什么我选Flask而不是Django或Node来搭视频平台
动手之前其实纠结过一阵子。Django自带Admin后台和ORM,按说做这种内容管理型站点很顺手;Node.js的Express也轻,流式处理的生态不错。但最终选了Flask,有几个很实际的原因。
第一个原因是项目规模没到需要Django的程度。这个平台的核心场景就是电影列表、详情页、视频播放、后台上传这几个页面,没有复杂的权限体系,没有多租户,没有审批流。Flask只用几行代码就能起一个服务,蓝图(Blueprint)能把路由拆得清清楚楚,SQLAlchemy单独接进来也就三五行配置。Django的Admin在视频元数据管理上确实香,但为了一个Admin功能背一个重框架,后面写流媒体接口、自定义路由的时候反而要被框架的约定拖着走,不划算。
第二个原因是Flask在处理文件流、自定义响应头这些底层HTTP细节时非常直白。视频播放涉及Range请求(后面专门讲),需要能够随时拿到请求头、自己拼响应头、返回206状态码。Flask的send_file带conditional=True就直接支持,不需要像Django那样绕一圈用FileResponse再做额外配置。对于这种偏底层的需求,越是简单灵活的框架越好用。
第三个原因是部署心智负担小。Flask写出来的应用就是一个Python进程,配Gunicorn或者uWSGI就能跑,Docker镜像可以控制到很小,内存占用通常在100MB以内。我是在一台2核4G的云服务器上部署的,Django上来光ORM和中间件就吃掉不少内存,Flask在这种资源下还能留出余量给系统本身。
当然不是说Flask没缺点。它的模板、Form、Admin都得自己组装,项目稍微大一点就容易出现"依赖拼盘"的感觉。我的应对方式是:项目启动前先把需要的Flask生态组件列清楚,不贪多,只用Flask-SQLAlchemy做数据库映射、Flask-Migrate做表结构迁移、Flask-CORS处理跨域(移动端调试时会用到),其余全部用Flask原生能力手写。整套依赖不到20个,requirements.txt一眼能看到底。
再补一个很多人忽略的点:Flask的调试体验是真的好。改完代码自动reload,报错页面直接显示堆栈,不用像前端项目那样配一堆source map。在VSCode里新建一个Flask项目,F5跑起来就能断点调试,这个对边写边调接口的开发方式非常友好。我最初在Windows上开发,装好Python 3.11,VSCode里装Python扩展,创建一个app.py写最简单的hello world,然后逐步加功能,整个链路非常顺。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 项目骨架与数据模型:先把影音库的根基打好
平台看着简单,但目录结构如果没有提前设计好,后面加功能必乱。我最终采用的目录结构是这样的:
text复制movie-platform/
├── app.py # 应用入口,创建Flask实例
├── config.py # 配置文件(数据库地址、媒体目录等)
├── models.py # SQLAlchemy模型定义
├── requirements.txt # 依赖清单
├── blueprints/
│ ├── __init__.py
│ ├── main.py # 前台页面路由
│ ├── api.py # API接口(视频流、电影列表等)
│ └── admin.py # 后台管理路由
├── templates/
│ ├── index.html # 电影列表页
│ ├── detail.html # 电影详情页
│ ├── player.html # 播放器页面
│ └── admin/
│ ├── upload.html # 上传页
│ └── movie_form.html # 电影信息编辑页
├── static/
│ ├── css/
│ ├── js/
│ └── posters/ # 封面图存储
├── media/ # 视频文件目录(不入库,通过配置指定)
└── utils/
├── ffprobe.py # 读取视频信息
└── video.py # 视频处理工具(截图、格式探测)
媒体文件目录单独放在项目之外,这是为了部署时方便。视频动辄几个GB甚至几十GB,如果放在项目目录里,Docker镜像打起来会非常痛苦,迁移也更麻烦。我在部署时直接把宿主机的一个/data/media目录挂载到容器里,程序读取的路径通过环境变量配置,这样代码完全不用改,只管换路径。
数据模型是这次设计比较关键的部分。电影需要记录的字段比想象中多:标题、原名、导演、演员、类型、年份、地区、语言、片长、评分、简介、封面图、视频文件名、字幕文件名、文件大小、编码格式,还有入库时间和最后播放时间。最终表结构如下:
python复制class Movie(db.Model):
__tablename__ = 'movies'
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(200), nullable=False, index=True)
original_title = db.Column(db.String(200), default='')
director = db.Column(db.String(100), default='')
actors = db.Column(db.Text, default='') # 逗号分隔
genres = db.Column(db.String(100), default='') # 逗号分隔
release_year = db.Column(db.Integer, index=True)
region = db.Column(db.String(50), default='')
duration = db.Column(db.Integer, default=0) # 秒
rating = db.Column(db.Float, default=0.0)
intro = db.Column(db.Text, default='')
poster_path = db.Column(db.String(200), default='')
video_filename = db.Column(db.String(200), nullable=False)
subtitle_filenames = db.Column(db.Text, default='') # JSON数组
file_size = db.Column(db.BigInteger, default=0)
video_codec = db.Column(db.String(50), default='')
audio_codec = db.Column(db.String(50), default='')
created_at = db.Column(db.DateTime, default=datetime.utcnow)
last_played_at = db.Column(db.DateTime, nullable=True)
实际开发时踩了一个和SQLite有关的坑:file_size如果存普通Integer,超过2GB的文件会溢出报错。Python里SQLite对整数没有严格长度限制,但SQLAlchemy的Integer在底层映射到数据库后会有上限,所以大文件长度必须用BigInteger。这个问题在MySQL里不明显,但SQLite用户会直接看到数据库写入失败,排查起来很困惑。
建表迁移我用了Flask-Migrate。第一次用的时候在VSCode里创建一个Flask项目,然后直接敲flask db init、flask db migrate、flask db upgrade,这套流程在Windows PowerShell里需要注意激活虚拟环境,不然会装到全局Python里产生一堆权限问题。一个小技巧:在app.py里显式声明app.config['SQLALCHEMY_DATABASE_URI'],不要让Flask自动推断,这样后面切换MySQL或者PostgreSQL时只需要改这一行配置。
电影列表接口做了一个最简单的分页和搜索。分页参数用page和per_page,默认每页24部,返回JSON结构如下:
json复制{
"code": 0,
"data": {
"total": 128,
"items": [
{
"id": 1,
"title": "肖申克的救赎",
"poster_path": "/static/posters/shawshank.jpg",
"rating": 9.7,
"release_year": 1994
}
]
}
}
搜索我用的是简单LIKE查询,标题和原名都做模糊匹配。数据量上万条之前,这个方案性能完全够用,没必要为一个小项目上Elasticsearch。但要注意LIKE查询在SQLite里是不区分大小写的,MySQL却区分,如果发现搜英文片名大小写不一致,可以在MySQL里对字段加COLLATE utf8mb4_general_ci解决。
3. 视频流式传输的核心:Range请求与206 Partial Content的实战
这个章节是整个平台技术含量最高的地方,也是我最初踩坑最惨的部分。先直接抛结论:浏览器里的HTML5 <video> 标签播放MP4时,默认会发送HTTP Range请求来分段拉取数据,如果你的Web后端没有正确响应Range头,播放器要么直接播放失败,要么进度条拖到哪就卡在哪。
3.1 Range请求到底在做什么
当用户打开详情页点击播放,浏览器会用一个<video>元素请求视频URL。默认情况下,浏览器不会一次性把整个视频文件下载下来(那样太浪费带宽和内存),而是先发一个带Range: bytes=0-的请求,告诉服务器"我从第0字节开始,你给我一部分数据"。服务器正确响应后,浏览器拿到一部分数据就开始解码播放,同时继续请求后面的字节段。用户拖进度条时,浏览器会发出类似Range: bytes=10485760-的请求,要求从某个偏移量开始传数据。
如果服务器不支持Range,有两种情况发生:
- 服务器完全忽略
Range头,直接返回200 + 整个文件。此时浏览器会尝试从头到尾下载完才能播放,体验极差,文件一大会白屏很久; - 服务器返回200但内容不完整,浏览器解码失败,视频直接黑屏。
解决这个问题在Flask里一点都不复杂。send_file函数自带条件请求支持,只要传入conditional=True,它就能自动处理Range头并返回206 Partial Content:
python复制from flask import send_file
@app.route('/media/<path:filename>')
def media(filename):
path = os.path.join(MEDIA_DIR, filename)
if not os.path.exists(path):
abort(404)
return send_file(path, conditional=True)
就这一行,播放器拖动进度条的问题解决了一半。为什么是"一半"?因为如果用send_file返回超大文件,Flask默认会用WSGI服务一次把文件全读入响应。开发服务器无所谓,但生产环境用Gunicorn配合sendfile时,如果有Nginx在前面做反代,可以在Nginx层处理静态文件请求,让Nginx直接接管Range,性能会好一个量级。后面部署章节会细说。
3.2 手动实现Range响应:理解比调用更重要
虽然Flask已经封装好了,但如果你想深入学习流媒体,强烈建议自己手动实现一次Range响应。实现逻辑其实很简单,核心就四步:
- 从请求头里解析
Range字段,格式是bytes=start-end; - 用
os.path.getsize获取文件大小; - 根据Range计算起始偏移和结束偏移;
- 用
Response返回片段数据,并设置Content-Range、Accept-Ranges、Content-Length响应头。
实现代码:
python复制import os
from flask import request, Response, abort
@app.route('/stream/<path:filename>')
def stream_video(filename):
path = os.path.join(MEDIA_DIR, filename)
file_size = os.path.getsize(path)
range_header = request.headers.get('Range')
if not range_header:
# 没有Range头,返回完整文件
return Response(
open(path, 'rb').read(),
status=200,
headers={
'Content-Length': str(file_size),
'Accept-Ranges': 'bytes',
'Content-Type': 'video/mp4'
}
)
# 只处理 bytes=start-end 或 bytes=start- 格式
try:
start = int(range_header.replace('bytes=', '').split('-')[0])
end = int(range_header.replace('bytes=', '').split('-')[1])
except (IndexError, ValueError):
start = int(range_header.replace('bytes=', '').split('-')[0])
end = file_size - 1
if start >= file_size:
abort(416)
if end >= file_size:
end = file_size - 1
length = end - start + 1
def generate():
with open(path, 'rb') as f:
f.seek(start)
remaining = length
while remaining > 0:
chunk = f.read(min(8192, remaining))
if not chunk:
break
remaining -= len(chunk)
yield chunk
response = Response(
generate(),
status=206,
mimetype='video/mp4',
content_type='video/mp4'
)
response.headers.add('Content-Range', f'bytes {start}-{end}/{file_size}')
response.headers.add('Accept-Ranges', 'bytes')
response.headers.add('Content-Length', str(length))
return response
注意上面的generate()用生成器逐块读取文件,而不是一次性read()整个文件,这是大文件传输的关键。如果直接把500MB的视频一次读进内存,Gunicorn的worker分分钟被卡死。
从原理层面理解了Range后,回过头再去看Flask的send_file,你会发现它其实就是把这套逻辑封装好了,还额外处理了If-Modified-Since、ETag等缓存头。生产环境直接用send_file即可。
3.3 视频格式兼容性:为什么我推荐H.264 + AAC的MP4
Range请求解决的是"能传能播"的问题,但"播得顺不顺"还取决于视频的封装格式和编码。我第一次播放测试时用的是网上下的一部MKV格式电影,结果Chrome直接不播,Firefox播放了但有声音没画面。
原因很简单:HTML5 <video> 的编解码器支持是有限的。目前浏览器兼容性最好的组合是H.264视频编码 + AAC音频编码 + MP4容器。MKV容器(通常是HEVC/H.265编码或AC3/DTS音轨)在浏览器里普遍不支持,HEVC在Chrome/Firefox里可以说全军覆没,Safari部分支持但也有很多限制。
解决这个问题我用了FFmpeg做格式归一化。在后台入库时,自动检测视频编码,如果发现不是H.264/AAC的MP4,就直接转成一个临时MP4再入库。为了不阻塞上传流程,我用了任务队列的思路:上传完成只记录任务状态,后台用子进程跑FFmpeg转码,转完再更新数据库里的video_filename字段。转码命令:
bash复制ffmpeg -i input.mkv -c:v libx264 -preset medium -crf 23 -c:a aac -b:a 192k -movflags +faststart output.mp4
-movflags +faststart这个参数非常关键,它会把MP4的元数据(moov原子)移到文件头部。如果没有这个参数,浏览器必须下载完整文件才能知道视频时长和采样信息,进度条永远不加载,体验直接拉胯。我处理第一批视频时忽略了它,后来每一部电影打开都是黑屏几十秒才出画面,排查半天才发现是moov位置的问题。
4. 播放器选型与DPlayer集成:从能看到好用的进阶
后端能把视频流顺畅地送到浏览器,接下来就是前端播放器的活了。HTML5原生<video>标签其实已经能满足基本播放需求,但要做字幕切换、倍速播放、记忆进度、封面预览这些功能时,原生控件的体验就非常差了。我把市面上的开源播放器大致比了一圈。
| 播放器 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| video.js | 生态大、插件多、文档全 | UI偏重,默认样式不够现代 | 需要做复杂定制的项目 |
| DPlayer | UI现代、支持弹幕、字幕、截图 | 社区维护节奏一般,但稳定 | 个人项目、影音库首选 |
| Plyr | 轻量、颜值高 | 字幕和HLS支持需要额外插件 | 轻量嵌入场景 |
| ArtPlayer | 功能丰富、设计精致 | 诞生较晚,资料少 | 新一代项目可以考虑 |
最终我选了DPlayer。原因很简单:它对字幕文件的支持是开箱即用的,subtitle配置项直接传一个VTT或者SRT文件路径就能显示,不用自己写字幕解析器。而且它的控制栏上有截图按钮、倍速菜单、播放模式切换,这些都是电影场景的高频需求,不需要我再额外开发。
播放器接入的核心代码:
html复制<div id="dplayer"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
// 这里指向Flask提供的流媒体接口,后端要用send_file(conditional=True)
url: `/api/movie/${movieId}/stream`,
type: 'auto'
},
subtitle: {
url: `/api/movie/${movieId}/subtitle`,
type: 'webvtt'
},
screenshot: true,
hotkey: true
});
// 记录播放进度:用DPlayer的timeupdate事件
dp.on('timeupdate', function() {
const currentTime = dp.video.currentTime;
localStorage.setItem(`movie_${movieId}_progress`, currentTime);
});
4.1 字幕转VTT的坑
DPlayer官方文档写着支持SRT字幕,我实际使用发现,中文SRT的编码问题在跨平台时非常折磨人。Windows上编辑的SRT文件通常是GBK编码,Chrome强制按UTF-8解析,结果就是满屏乱码。我的做法是后端在返回字幕之前用Python统一做一次编码转换,顺便把SRT格式转成VTT:
python复制import html
def srt_to_vtt(srt_content: str) -> str:
# 将SRT的时间轴格式转换成VTT
vtt = 'WEBVTT\n\n'
for block in srt_content.strip().split('\n\n'):
lines = block.split('\n')
if len(lines) < 2:
continue
index = lines[0]
times = lines[1].replace(',', '.')
text = '\n'.join(lines[2:])
vtt += f'{times}\n{html.escape(text)}\n\n'
return vtt
后端从字幕文件中读取内容,把text/plain的响应改成text/vtt,同时做编码检测:
python复制@app.route('/api/movie/<int:movie_id>/subtitle')
def subtitle(movie_id):
movie = Movie.query.get_or_404(movie_id)
if not movie.subtitle_filenames:
abort(404)
sub_files = json.loads(movie.subtitle_filenames)
sub_path = os.path.join(MEDIA_DIR, sub_files[0])
with open(sub_path, 'rb') as f:
raw = f.read()
# 尝试UTF-8,失败则GBK
try:
content = raw.decode('utf-8')
except UnicodeDecodeError:
content = raw.decode('gbk', errors='ignore')
vtt = srt_to_vtt(content)
return Response(vtt, mimetype='text/vtt')
这个小函数解决了我平台上线后最大的体验问题。字幕在所有设备上都能正确显示,不再依赖浏览器自动识别编码。如果你在集成DPlayer时发现字幕不显示或乱码,九成是编码问题,优先检查SRT文件是GBK还是UTF-8。
4.2 多清晰度切换的隐藏坑
平台上线后我加了一个功能:同一个视频保留多个清晰度版本(原画、1080p、720p),详情页播放器里可以切换。这里藏了一个很大的坑——如果用纯HTML5 video实现清晰度切换,切换时浏览器会重新加载整个视频流,播放进度直接丢失,用户体验极差。
DPlayer的官方方案是做多个video源,但底层还是同一个<video>元素,切换清晰度同样会跳到开头。我最终用了两个妥协方案:一是只允许在播放前切换清晰度,播放中切换时给个确认提示;二是把播放进度保存到localStorage,切换清晰度后自动seek回之前的进度。虽然不尽完美,但已经达到了可接受的水平。
更进一步的做法是转HLS流(HTTP Live Streaming),把视频切片成.m3u8 + 一堆.ts文件,再用hls.js在浏览器里播放。HLS天然支持多码率无缝切换,但代价是需要额外做转码和切片,部署复杂度直接上一个台阶。如果只是个人影音库,我建议先不做HLS,等播放量上来了或者确实需要清晰度无缝切换再考虑。
5. 后台入库、自动取封面与ffmpeg预处理
平台的管理后台没有做成独立系统,就几个页面:上传视频、编辑电影信息、查看入库列表。核心功能是快速把一个新的视频文件变成平台里能搜索、能播放、有封面的电影条目。
5.1 上传与扫描两种入库方式
我做了两种入库方式。第一种是手动上传,适合零散添加:后台表单里选择MP4文件、填写片名和简介,提交后后端用werkzeug的安全文件名处理保存到media/videos目录。第二种是批量扫描,适合第一次把NAS里的存量视频库导入:指定一个目录,后端遍历所有.mp4、.mkv、.avi文件,通过文件名猜测片名(去掉扩展名和专业术语如"1080p"、"bluray"),然后读取视频元数据,自动创建数据库记录。第二种方式实测导入了我NAS里的三百多部电影,效率极高。
扫描逻辑大概是这样:
python复制def guess_movie_title(filename: str) -> str:
name = filename
# 去掉常见的资源标签
patterns = [r'\.\d{4}\..*', r'1080p.*', r'720p.*', r'bluray.*', r'BRRip.*']
for pat in patterns:
name = re.sub(pat, '', name, flags=re.IGNORECASE)
return name.strip(' ._')
def scan_directory(dir_path):
for entry in os.listdir(dir_path):
if not entry.lower().endswith(('.mp4', '.mkv', '.avi')):
continue
full_path = os.path.join(dir_path, entry)
info = probe_video(full_path)
movie = Movie(title=guess_movie_title(entry), video_filename=entry,
duration=info['duration'], file_size=os.path.getsize(full_path),
video_codec=info['video_codec'], audio_codec=info['audio_codec'])
db.session.add(movie)
db.session.commit()
5.2 ffprobe读取视频信息与自动截图
FFmpeg工具链里有个叫ffprobe的兄弟命令,专门用来读取媒体文件信息。我把它封装成一个函数,入库时自动提取视频时长、分辨率、编码格式,省去手动填写的麻烦。
python复制import subprocess, json
def probe_video(path) -> dict:
cmd = [
'ffprobe', '-v', 'quiet', '-print_format', 'json',
'-show_format', '-show_streams', path
]
result = subprocess.run(cmd, capture_output=True, text=True)
data = json.loads(result.stdout)
video_stream = next(s for s in data['streams'] if s['codec_type'] == 'video')
audio_stream = next((s for s in data['streams'] if s['codec_type'] == 'audio'), None)
duration = float(data['format'].get('duration', 0))
return {
'duration': int(duration),
'video_codec': video_stream.get('codec_name', ''),
'audio_codec': audio_stream.get('codec_name', '') if audio_stream else '',
'width': video_stream.get('width', 0),
'height': video_stream.get('height', 0)
}
自动截图做封面也是一个很实用的功能。提取电影第10秒的一帧画面,生成一张jpg海报存到static/posters目录:
bash复制ffmpeg -y -ss 00:00:10 -i input.mp4 -frames:v 1 -vf "scale=300:-1" poster.jpg
这个命令用-ss定位到第10秒,-frames:v 1只输出一帧,scale=300:-1压缩宽度到300像素并保持宽高比。如果视频超过10秒(通常都超),这个命令大部分1秒内就能执行完,不影响入库速度。实际测试中如果电影开篇是黑场或者制片厂logo,取到的封面不理想,我会手动再上传一张海报图覆盖它。
5.3 大文件上传的思考
后面我并没有开放直接通过浏览器上传大视频的功能,而是用"存放到服务器目录 + 点击扫描"的方式。原因是对Flask应用来说,大文件上传(尤其是超过2GB)需要额外做分片上传,不然会占满内存和连接超时。个人影音库的场景里,视频文件基本都已经在NAS或服务器上了,扫描入库远比上传更实际。如果一定要开放多用户上传的小视频,可以用requests流式传输到独立的媒体目录,再通过API触发扫描任务,不要把上传逻辑和播放逻辑耦合在一起。
6. Docker化部署与Nginx反代:让平台跑得更稳更快
开发环境跑通后,部署到Linux服务器是另一个环节。我是用Docker Compose把Flask应用和Nginx两个容器编排在一起,Flask只处理API和页面渲染,视频文件的静态请求全部交给Nginx,利用内核的sendfile机制直接发送文件,性能和稳定性远超Python进程转发。
6.1 多阶段构建Docker镜像
Flask应用镜像可以拆成两阶段:先装依赖,再拷贝代码运行。Python依赖里有部分需要编译的包(比如某些C扩展库),多阶段构建能让最终镜像不包含编译器,体积减少一大截。我的Dockerfile如下:
dockerfile复制FROM python:3.11-slim as builder
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir --user -r requirements.txt
FROM python:3.11-slim
WORKDIR /app
COPY --from=builder /root/.local /root/.local
COPY . .
ENV PATH=/root/.local/bin:$PATH
ENV MEDIA_DIR=/data/media
EXPOSE 5000
CMD ["gunicorn", "-w", "3", "-b", "0.0.0.0:5000", "--timeout", "120", "app:app"]
几个关键点:
MEDIA_DIR用环境变量指定媒体目录,容器里映射到宿主机/data/media;- Gunicorn worker数量设为
2*CPU核数+1,我的2核机器设为3个; --timeout 120是因为第一次请求视频时如果触发转码,可能超过默认30秒的超时时间。转码是异步子进程,但某些文件的元数据读取也可能有延迟,给足超时更稳妥。
6.2 docker-compose编排与Nginx配置
docker-compose.yml把Flask容器和Nginx容器绑定在同一网络,Nginx通过服务名flask访问Flask。
yaml复制version: '3.8'
services:
web:
build: .
restart: always
volumes:
- /data/media:/data/media
- ./static:/app/static
environment:
- DATABASE_URL=sqlite:////data/app.db
expose:
- "5000"
nginx:
image: nginx:stable-alpine
restart: always
ports:
- "80:80"
volumes:
- ./nginx.conf:/etc/nginx/conf.d/default.conf
- /data/media:/data/media
depends_on:
- web
Nginx的核心配置如下,重点是媒体目录的location块:
nginx复制server {
listen 80;
server_name video.example.com;
location / {
proxy_pass http://web:5000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /media/ {
alias /data/media/;
sendfile on;
sendfile_max_chunk 1m;
tcp_nopush on;
add_header Accept-Ranges bytes;
# 关键:让Nginx直接处理Range请求,回源到Flask的话性能会下降
proxy_pass http://web:5000;
}
location /static/ {
alias /app/static/;
expires 7d;
}
}
这里有一个容易忽略的细节:location /media/ 里我写了alias,理论上Nginx应该直接从磁盘找文件返回,不需要代理到Flask。但我又写了proxy_pass,看起来矛盾。实际上两种方式都可行,区别在于:如果你用alias直接指向宿主机目录,Nginx处理的是文件系统的静态文件,性能和Range都很好;如果你希望Flask能记录播放日志、控制访问权限(比如防盗链),就需要把/media/代理给Flask的send_file。我当时选择代理到Flask,是因为想在播放前做权限校验(只允许登录用户访问视频),但后来发现每次播放一个视频都要过Python一层纯属浪费CPU,于是改成了Nginx直接静态服务,权限校验只放在列表和详情API层面。
改完之后播放一个2GB的MKV文件,Nginx处理Range请求完全不吃力,内存占用几乎没有变化。如果想让Nginx直接接管,把proxy_pass删掉就好。
6.3 部署时容易遇到的网络与磁盘问题
部署上线那几天踩了两个和生产环境高度相关的坑。
第一个是云服务器带宽。视频播放对下行带宽要求很高,我的服务器是5Mbps的带宽,本地测试流畅,但多人同时在线时立刻卡顿。家用NAS场景一般没这个问题,但如果放公网,一定要清楚自己服务器带宽上限,5Mbps大概只能支持一部720p流畅播放,1080p就需要至少8-10Mbps。这是物理限制,优化应用也解决不了。
第二个是磁盘IO。视频文件过大时,磁盘读取速度会成为瓶颈。Nginx的sendfile_max_chunk 1m就是为了限制单次sendfile调用读取量,防止一个大文件的读取占用整个磁盘队列导致其他请求响应变慢。实际用htop和iotop观察过,并发播放3部不同电影时,磁盘IO确实到了比较高的水位,把这个值设为1m-2m之间能显著降低卡顿概率。
7. 上线后我踩过的性能与兼容性坑
平台跑起来后,陆陆续续发现了一些开发阶段根本不会暴露的问题,整理出来给后来人当参考。
7.1 Flask debug模式禁止在生产环境开启
这是最基础但最容易犯的错。开发时为了方便,我会在app.run(debug=True)里跑应用。有次部署到测试服务器忘记关debug模式,结果任何一次Python报错都会在浏览器里显示完整的堆栈,包括源代码片段和服务器环境变量,而且werkzeug的debugger还允许通过浏览器执行任意Python代码。这个洞一旦被利用,服务器等同于裸奔。上线前务必把debug设为False,最好用环境变量FLASK_ENV=production来控制。
7.2 Favicon请求造成的404日志刷屏
上线后看Nginx日志,发现每隔几秒就一个GET /favicon.ico 404。看似无害,但日志刷屏会掩盖真正的错误信息。解决方式是提供一个图标,或者在后端加一个空路由吞掉请求:
python复制@app.route('/favicon.ico')
def favicon():
return '', 204
顺手还能给前端页面加一个SVG标题图标,彻底解决。
7.3 浏览器自动播放策略
用户点击详情页进入播放器页面后,我最初用JavaScript在页面加载完成时自动调用dp.play(),想让视频直接开始播。结果Chrome和Safari都拦截了:浏览器要求用户必须要有交互(点击)后才能播放带声音的视频。这个策略主要是为了防止网页自动播放声音骚扰用户。解决办法是不要把视频播放放在页面加载事件里,而是等用户点击"播放"按钮后再调dp.play()。DPlayer自带的播放按钮天然满足这个交互条件,但我自定义了一个"立即播放"的浮层按钮,第一次调用被拦截后,后续点击就正常了。
7.4 同时播放时的Gunicorn worker阻塞
Gunicorn默认的worker类型是同步(sync),每个worker同一时间只能处理一个请求。视频流播放是长连接,一个客户端在播放过程中会持续占用一个worker数分钟甚至数小时,如果所有worker都被占满,其他用户连页面都打不开。这个问题在我开放给几个朋友试用时就出现了。
解决办法有两种:一是给Gunicorn换成异步worker类型(gevent或eventlet),用协程处理并发IO;二是更彻底地让Nginx直接服务视频文件,Flask只做页面和API。我最终采用了第二种,因为视频传输交给Nginx后,Gunicorn worker只处理轻量API请求,三四个worker完全够用,彻底绕开了worker占用问题。如果你打算让Flask直接处理视频流且又需要高并发,那就必须上gevent,并在启动命令里加上--worker-class gevent。
7.5 页面加载速度优化
前端页面一开始把全部电影信息塞在一个HTML模板里,后来数量多了加载开始变慢。优化办法有三板斧:列表接口改成只返回基础字段(海报、标题、年份),详情接口按需返回完整信息;海报图全部压缩成小尺寸缩略图,列表页上一张300x450的图控制在30KB以内;Nginx对静态资源加expires 7d,海报和JS/CSS都走浏览器缓存。做完这三项后,列表页从1.8秒降到了400毫秒左右,体感明显改善。
7.6 手机播放兼容性
手机端(iOS Safari / Android Chrome)访问这个平台的时候,有几个额外问题。iOS Safari对<video>的playsinline属性要求很严格,不加的话视频会强制全屏播放,体验很差。在<video>标签或者DPlayer配置里设置playsinline: true可以解决。Android Chrome在播放MP4时如果地址没有文件后缀(走的是/api/movie/1/stream这种无后缀路由),有时候浏览器会不确定类型而拒绝播放,需要在响应头里明确设置Content-Type: video/mp4。我曾经在这个问题上排查了很久,最后发现Flask的send_file能自动判断MIME类型,但如果是自己构造Response,就千万别漏了mimetype参数。
另外热搜词里的"已知视频url下载视频文件到手机"这个需求,我也顺手做成了一个功能:详情页放一个"缓存到本地"按钮,后端把视频通过流式接口输出,浏览器触发下载,iPhone和Android都能直接存到相册或文件App里。实现也不复杂,给一个普通接口加上Content-Disposition: attachment; filename="xxx.mp4"响应头就行,但要注意大文件不要用send_file直接传,因为send_file是内联播放用的,下载时建议用send_file(download_name=..., as_attachment=True)。
结语
这个Flask电影视频播放器平台,从最初的玩具demo到真正能承载日常观影的小系统,中间最大的收获不是代码量,而是把HTTP原理、大文件传输、浏览器行为和部署运维这些知识点串起来了。如果你也想做一个类似的项目,我建议按照"先本地跑通播放一个MP4 — 加入元数据管理 — 加入后台入库 — 上Docker和Nginx"的顺序走,每步都实际验证一遍再往前。过程中遇到视频不播、拖动卡顿、字幕乱码这类问题,基本都是Range请求、编码格式、字幕编码这三个原因之一,照着这篇文章排查就行。
我自己用下来的体会是,自己搭平台的快乐不在于能做得多完善,而在于每个环节都能按自己的需求去改。今天觉得海报不好看,改个切图参数重扫一遍;明天想加个演员维度搜索,写个查询加个页面就行。这种完全掌控的感觉,才是自己动手最大的回报。
