Flask 实现html5 video视频流加载_flask 加载本地视频-CSDN博客

本文链接：https://blog.csdn.net/biggbang/article/details/120684177

使用html5 video播放mp4视频文件。在src里直接写上视频文件地址，对于小的视频文件，这样播放控制seeking快进快退都没问题。

但如果播放大的视频文件（>1G），通过控制台请求发现，每次请求都只是部分内容，返回 206 PARTIAL CONTENT。

手动实现流加载：

@app.route('/part_to_full')
def part_to_full():
    range_header = request.headers.get('Range', None)
    if range_header:
        match = re.search(r'bytes=(\d+)-\d*', range_header)
        sk = int(match.group(1))
    else:
        sk = 0    
    
    cwd = os.getcwd()

    with open(os.path.join(cwd, 'static', 'videos', 'large_8G.mp4'), 'rb') as fr:
        fr.seek(0, 2)
        total = fr.tell()
        fr.seek(sk)
        chunk = fr.read(1024 * 1024 * 2)
        end = sk + len(chunk) -1        
        headers = Headers()
        headers.add('Accept-Ranges', 'bytes')
        headers.add('Content-Type', 'application/octet-stream')
        headers.add('Content-Range', 'bytes {}-{}/{}'.format(sk, end, total))
        return Response(chunk, 206, headers=headers)

{% raw %}
<html lang="en">
<head>
    <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
</head>

<body>
    <video class="video-js" controls preload="auto" width="1024" height="512" poster="{{ url_for('static', filename='images/video_poster.jpg') }}" data-setup="{}">
        <source src="{{ url_for('part_to_full') }}", type="video/mp4">
        Sorry, your browser doesn't support embedded videos.
    </video>
    <script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
    <video class="video-js" controls preload="auto" width="1024" height="512" poster="{{ url_for('static', filename='images/video_poster.jpg') }}" data-setup="{}">
        <source src="{{ url_for('static', filename='videos/large_8G.mp4') }}", type="video/mp4">
        Sorry, your browser doesn't support embedded videos.
    </video>
</body>
</html>
{% endraw %}