如何通过模板或视图编辑Django FileResponse的HTML并自定义video标签？

FileResponse的作用是直接返回文件流，浏览器会自动生成默认的播放页面，这个页面的video标签由浏览器控制，无法自定义。要实现自定义video标签，你需要换一种方式：自己编写HTML模板，通过视图传递视频URL，或者结合流式视图来实现。

方法一：直接渲染自定义HTML模板（适合小视频） #

这种方式不需要用FileResponse，直接在视图中获取视频的访问URL，渲染包含自定义video标签的模板。

1. 编写视图函数

from django.shortcuts import render
from .models import VideoModel

def play_video(request, video_id):
    # 根据ID获取视频对象
    video = VideoModel.objects.get(id=video_id)
    # 将视频的URL传递给模板
    return render(request, 'play_video.html', {'video_url': video.file.url})

2. 编写自定义HTML模板（play_video.html）
   在模板里你可以自由设置video标签的任何属性，比如控件、自动播放、样式等：

<!DOCTYPE html>
<html>
<head>
    <title>视频播放</title>
    <style>
        .video-container {
            max-width: 900px;
            margin: 2rem auto;
        }
        .custom-video {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video class="custom-video" controls autoplay muted poster="/path/to/poster-image.jpg">
            <source src="{{ video_url }}" type="video/mp4">
            你的浏览器不支持HTML5视频播放，请更换浏览器后重试。
        </video>
    </div>
</body>
</html>

3. 配置URL路由

from django.urls import path
from .views import play_video

urlpatterns = [
    path('video/<int:video_id>/', play_video, name='play_video'),
]

方法二：结合流式视图+自定义模板（适合大视频） #

如果视频文件较大，需要流式传输避免一次性加载，你可以单独写一个返回FileResponse的流式视图，然后在自定义模板的video标签中引用这个视图的URL作为视频源。

1. 编写流式视频视图

from django.http import FileResponse
from .models import VideoModel
import os

def stream_video(request, video_id):
    video = VideoModel.objects.get(id=video_id)
    # 打开视频文件，二进制只读模式
    video_file = open(video.file.path, 'rb')
    # 创建FileResponse，指定视频MIME类型
    response = FileResponse(video_file, content_type='video/mp4')
    # 设置响应头，让浏览器在线播放而非下载
    response['Content-Disposition'] = f'inline; filename="{os.path.basename(video.file.path)}"'
    return response

2. 修改模板中的video标签
   在模板里引用流式视图的URL作为视频源，同时保留自定义属性：

<div class="video-container">
    <video class="custom-video" controls width="100%">
        <source src="{% url 'stream_video' video.id %}" type="video/mp4">
        你的浏览器不支持HTML5视频播放，请更换浏览器后重试。
    </video>
</div>

3. 添加流式视图的URL路由

from .views import stream_video

urlpatterns += [
    path('stream-video/<int:video_id>/', stream_video, name='stream_video'),
]

关键说明 #

FileResponse本质是返回文件内容，不会生成可自定义的HTML结构，浏览器会用默认的播放界面处理。只有通过自己渲染HTML模板，才能完全控制video标签的属性、样式和页面布局。

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