django实现视频播放和拖拽进度条

小福不认命

已于 2023-05-19 13:08:04 修改

阅读量507

点赞数

文章标签： django 音视频 python

于 2023-05-19 13:04:26 首次发布

本文链接：https://blog.csdn.net/qq_39152918/article/details/130764516

版权

该文章介绍了如何在Django中使用StreamingHttpResponse处理MP4文件，实现视频的分段传输，从而支持前端的视频播放和进度条拖动功能。关键在于后端处理HTTP_RANGE头信息，根据范围请求返回相应的内容片段。

摘要由CSDN通过智能技术生成

django实现视频播放和拖拽进度条

django实现音乐或者视频播放可以使用http中的StreamingHttpResponse，MP4文件分段传送，同时是实现进度条拖动

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<video id="example"  class="vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source style=" background:#000;" src="/video/play/1" type="video/mp4">
    <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser</p>
</video>
</body>
</html>

后端代码：记住status设置206否则进度条没有效果

def file_iterator(file_name, chunk_size=8192, offset=0, length=None):
    # 每次最多读取8Kb
    with open(file_name, "rb") as f:
        f.seek(offset, os.SEEK_SET)
        remaining = length  # 还有多少未读取
        while True:
            bytes_length = chunk_size if remaining is None else min(remaining, chunk_size)
            data = f.read(bytes_length)
            if not data:  # 没有数据了 退出
                break
            if remaining:
                remaining -= len(data)
            yield data


def stream_video(request, id):
    """将视频文件以流媒体的方式响应"""
    range_header = request.META.get('HTTP_RANGE', '').strip()
    range_re = re.compile(r'bytes\s*=\s*(?P<START>\d+)\s*-\s*(?P<END>\d*)', re.I)
    range_match = range_re.match(range_header)
    if id:
        path = Video.objects.filter(id=id).first()
        path = path.file_address
    else:
        path = "mda-peg35p1w58n7hqzb.mp4"
    # 这里根据实际情况改变，我的views.py在core文件夹下但是folder_path却只到core的上一层，media也在core文件夹下
    video_path = os.path.join(settings.BASE_DIR, 'static', 'video')  # 视频放在目录的static下的video文件夹中
    file_path = os.path.join(video_path, path)  # path就是template ?path=后面的参数的值
    size = os.path.getsize(file_path)  # 文件总大小
    content_type, encoding = mimetypes.guess_type(file_path)
    content_type = content_type or 'application/octet-stream'
    if range_match:
        first_byte, last_byte = range_match.group('START'), range_match.group('END')
        if first_byte:
            first_byte = int(first_byte)
        else:
            first_byte = 0
        last_byte = first_byte + 1024 * 1024 * 8  # 8M per piece, the maximum volume of the response body
        if last_byte > size:
            last_byte = size - 1
        length = last_byte - first_byte + 1
        resp = StreamingHttpResponse(file_iterator(file_path, offset=first_byte, length=length), status=206,
                                     content_type=content_type)
        resp['Content-Length'] = str(length)
        resp['Content-Range'] = 'bytes %s-%s/%s' % (first_byte, last_byte, size)
    else:
        # When the video stream is not obtained, the entire file is returned in the generator mode to save memory.
        resp = StreamingHttpResponse(FileWrapper(open(file_path, 'rb')), content_type=content_type)
        resp['Content-Length'] = str(size)
    resp['Accept-Ranges'] = 'bytes'
    return resp