www.zhblog.net

Flask 实现html5 video视频流加载

使用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 %}


核心就是每次只读取部分数据返回。响应头文件必须设置。

Accept-Ranges: bytes

Content-Range: <unit> <range-start>-<range-end>/<size> (unit:单位bytes;start:请求范围开头;end:请求范围结束;size:文件大小)

status: 206

展开阅读全文

评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 心情