Flask视频流异常：Chrome/Edge无法播放，Firefox/Safari正常

问题描述 #

基于Flask搭建的本地视频隧道播放页面，所有视频在Firefox及iPhone Safari可正常播放，但大部分视频在Chrome和Edge中无法播放，已尝试本地运行、更换播放器，问题依旧。

相关代码 #

视频播放器模板（video_detail.html） #

<div class="container mx-auto text-center">
    <h4 class="text-center my-4">{{ title }}</h4>
    <div class="video-container">
        <video id="video-player" controls preload="auto" playsinline>
            <source src="{{ url_for('stream_video', filename=video) }}" type="video/mp4">
            Ihr Browser unterstützt das Video-Tag nicht.
        </video>
        <p class="mt-3">{{ description }}</p>
    </div>
</div><br><br>

<a style="margin-left:15px" href="{{ url_for('index') }}" class="btn btn-red">Zurück zur Liste</a>
<button style="margin-left:15px" id="stream-button" class="btn btn-ylw">Stream</button>
<br><br><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    document.getElementById("stream-button").addEventListener("click", function() {
        var videoPath = "{{ url_for('stream_video', filename=video) }}";

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/send_video_path", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.send(JSON.stringify({ videoPath: videoPath }));
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

</body>
</html>

视频详情页路由（app.py） #

@app.route('/video-detail/<filename>')
@login_required
def video_detail(filename):
    video_path = os.path.join(VIDEO_DIRECTORY, filename)
    if not os.path.exists(video_path):
        return "Video nicht gefunden", 404
    
    base_name = filename.split('.')[0]
    image_file = base_name + '.png'
    description_file = base_name + '.txt'
    image_path = os.path.join(VIDEO_DIRECTORY, image_file)
    description_path = os.path.join(VIDEO_DIRECTORY, description_file)

    image_url = url_for('send_image', filename=image_file) if os.path.exists(image_path) else url_for('send_image', filename='default-image.png')
    description = read_description(description_path)

    return render_template('video_detail.html', video=filename, image=image_url, title=base_name, description=description)

视频流路由（app.py） #

@app.route('/video/')
@login_required
def stream_video(filename):
    video_path = os.path.join(VIDEO_DIRECTORY, filename)

    if not os.path.exists(video_path):
        return "Video nicht gefunden", 404

    video_size = os.path.getsize(video_path)
    range_header = request.headers.get('Range', None)
    byte1, byte2 = 0, video_size - 1

    if range_header:
        match = re.search('bytes=(\d+)-(\d*)', range_header)
        if match:
            groups = match.groups()
            if groups[0]:
                byte1 = int(groups[0])
            if groups[1]:
                byte2 = min(int(groups[1]), byte2)  # Vergewissern Sie sich, dass das Ende nicht über die Dateigröße hinaus geht

    length = byte2 - byte1 + 1
    data = None
    with open(video_path, 'rb') as f:
        f.seek(byte1)
        data = f.read(length)

    rv = Response(data, 206, mimetype='video/mp4', content_type='video/mp4', direct_passthrough=True)
    rv.headers.add('Content-Range', f'bytes {byte1}-{byte2}/{video_size}')
    rv.headers.add('Accept-Ranges', 'bytes')
    rv.headers.add('Cache-Control', 'no-cache')

    return rv

问题原因分析 #

1. 路由参数缺失：视频流路由@app.route('/video/')未定义<filename>参数，但函数stream_video需要接收该参数，导致Chrome/Edge请求视频时无法正确匹配路由返回404，而Firefox对路由匹配的容错性更强。
2. Range请求处理不规范：
   • 未区分完整请求与Range请求：当浏览器未发送Range头时，仍返回206 Partial Content状态码，Chrome/Edge对HTTP状态码合规性要求更严格，会拒绝解析不符合规范的响应。
   • 未设置Content-Length响应头：Chrome/Edge依赖该头判断视频内容长度，缺失会导致播放失败。
3. 视频编码兼容性：Chrome/Edge对MP4格式要求严格，必须为H.264（AVC）视频编码+AAC音频编码，若视频使用其他编码（如VP9视频、MP3音频），则无法正常播放。

解决方案 #

1. 修复路由参数 #

修改视频流路由定义，添加<filename>参数：

@app.route('/video/<filename>')
@login_required
def stream_video(filename):
    # 原函数逻辑不变

2. 规范Range请求处理 #

调整响应逻辑，区分完整请求和Range请求，补充必要响应头：

@app.route('/video/<filename>')
@login_required
def stream_video(filename):
    video_path = os.path.join(VIDEO_DIRECTORY, filename)

    if not os.path.exists(video_path):
        return "Video nicht gefunden", 404

    video_size = os.path.getsize(video_path)
    range_header = request.headers.get('Range', None)
    
    if range_header:
        # 处理Range请求
        match = re.search('bytes=(\d+)-(\d*)', range_header)
        if match:
            groups = match.groups()
            byte1 = int(groups[0]) if groups[0] else 0
            byte2 = int(groups[1]) if groups[1] else video_size - 1
            byte2 = min(byte2, video_size - 1)
        
        length = byte2 - byte1 + 1
        with open(video_path, 'rb') as f:
            f.seek(byte1)
            data = f.read(length)
        
        rv = Response(data, 206, mimetype='video/mp4')
        rv.headers['Content-Range'] = f'bytes {byte1}-{byte2}/{video_size}'
        rv.headers['Content-Length'] = str(length)
        rv.headers['Accept-Ranges'] = 'bytes'
    else:
        # 处理完整请求，返回200 OK
        rv = Response(open(video_path, 'rb'), 200, mimetype='video/mp4')
        rv.headers['Content-Length'] = str(video_size)
    
    rv.headers['Cache-Control'] = 'no-cache'
    return rv

3. 统一视频编码格式 #

使用FFmpeg将不符合要求的视频转码为H.264+AAC格式：

ffmpeg -i input.mp4 -c:v libx264 -c:a aac output.mp4

内容的提问来源于stack exchange，提问作者b0sna