Django项目中HTML video标签进度条拖动后自动归0重启播放问题

核心问题原因 #

拖拽进度条后视频跳回0的本质原因是当前承载视频文件的服务未正确实现HTTP Range分段请求支持。
HTML5原生<video>控件的进度拖拽、分段加载功能完全依赖HTTP Range机制：

• 浏览器在拖拽进度、分段缓存视频时，会自动在请求头中携带Range: bytes=起始位置-结束位置，告知服务器只需返回文件的指定字节分段
• 服务器必须返回206 Partial Content状态码，同时携带Content-Range、Accept-Ranges响应头，浏览器才能基于分段内容实现任意进度跳转
  你之前Flask项目运行正常，是因为Flask的静态文件服务、文件返回逻辑原生支持Range请求；而当前Django项目中，通过{{ movie.movie_path.url }}暴露的视频文件，默认由Django的内置静态服务视图django.views.static.serve提供响应时，未正确处理Range请求，最终导致拖拽进度时浏览器无法获取指定位置的视频分段，只能重置播放进度到0。

可落地解决方案 #

方案1：开发环境替换静态服务为支持Range的自定义视图 #

如果你当前处于开发阶段，先修改Media文件的路由配置，不要使用Django内置的static()辅助方法，替换为自行实现的Range支持视图：

1. 在主应用的视图文件中新增带安全校验的文件响应逻辑：

import os
from django.http import Http404, StreamingHttpResponse, HttpResponseBadRequest
from django.conf import settings

def serve_media_file(request, file_path):
    # 拼接文件完整路径，解析为绝对路径避免路径遍历
    full_file_path = os.path.abspath(os.path.join(settings.MEDIA_ROOT, file_path))
    media_root_abs = os.path.abspath(settings.MEDIA_ROOT)
    # 校验文件是否在MEDIA目录下，防止路径遍历攻击
    if not full_file_path.startswith(media_root_abs + os.sep):
        raise Http404("请求的文件不存在")
    if not os.path.isfile(full_file_path):
        raise Http404("请求的媒体文件不存在")
    
    file_total_size = os.path.getsize(full_file_path)
    range_header = request.META.get("HTTP_RANGE", "").strip()
    # 根据文件类型设置响应类型
    content_type = "video/mp4" if file_path.endswith(".mp4") else "application/octet-stream"

    # 解析处理Range请求
    if range_header:
        try:
            # Range头格式为 bytes=start-end
            start_byte, end_byte = range_header.removeprefix("bytes=").split("-")
            start_byte = int(start_byte)
            end_byte = int(end_byte) if end_byte else file_total_size - 1
        except ValueError:
            # 非法Range头则返回完整文件
            start_byte = 0
            end_byte = file_total_size - 1
        
        # 校验请求范围合法性
        if start_byte > end_byte or start_byte >= file_total_size:
            return HttpResponseBadRequest("非法的文件范围请求")
        
        # 生成分段文件流
        def read_file_chunk(start, end, chunk_size=1024*8):
            with open(full_file_path, "rb") as f:
                f.seek(start)
                remaining = end - start + 1
                while remaining > 0:
                    read_size = min(chunk_size, remaining)
                    chunk = f.read(read_size)
                    if not chunk:
                        break
                    remaining -= read_size
                    yield chunk
        
        response = StreamingHttpResponse(
            read_file_chunk(start_byte, end_byte),
            status=206,
            content_type=content_type
        )
        # 设置Range响应必须的头信息
        response["Content-Length"] = str(end_byte - start_byte + 1)
        response["Content-Range"] = f"bytes {start_byte}-{end_byte}/{file_total_size}"
        response["Accept-Ranges"] = "bytes"
        return response

    # 无Range请求时返回完整文件
    response = StreamingHttpResponse(
        open(full_file_path, "rb"),
        content_type=content_type
    )
    response["Content-Length"] = str(file_total_size)
    response["Accept-Ranges"] = "bytes"
    return response

2. 修改项目根路由urls.py，替换原有的Media静态路由配置：

from django.urls import re_path
from .views import serve_media_file

urlpatterns = [
    # 你的原有业务路由
    re_path(r"^media/(?P<file_path>.*)$", serve_media_file, name="media_serve")
]

方案2：生产环境直接用Web服务器处理媒体文件（推荐） #

正式上线时不要让Django承载静态/媒体文件响应，直接配置Nginx、Apache等成熟Web服务器处理MEDIA_URL对应的文件目录，这类服务原生支持Range请求、断点续传、静态缓存，性能远高于Django自行处理。以Nginx为例，只需在站点配置中新增对应规则即可，无需修改业务代码：

# 配置示例，将media目录映射为站点下的/media/路径
location /media/ {
    alias /your/project/absolute/path/media/;
}

排查校验清单 #

• 本地打开同一个视频文件，用播放器测试是否可自由拖拽进度，排除视频文件本身损坏的问题
• 打开浏览器开发者工具的「网络」面板，检查视频请求的响应头：拖动进度时观察是否发起新的带Range头的请求，若服务器返回的不是206 Partial Content状态码，即可确认是服务端Range支持异常
• 不要在视频URL后添加无意义的随机参数，避免触发浏览器异常缓存逻辑导致进度重置

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