如何在Gradio中更新Video组件？点击按钮切换视频后视频框为空

问题核心原因 #

你的代码存在两个关键问题：

1. 文件路径不可访问：用户上传的视频会被Gradio临时存储，直接替换后缀得到的_out.mp4如果不在Gradio的可访问范围内（比如临时目录外且未指定静态路径），组件无法加载该文件。
2. 更新方式冗余：无需用gr.components.Video.update包裹返回值，直接返回合法的视频路径即可完成组件更新。

修正方案 #

1. 确保目标视频可访问

将需要展示的_out.mp4放在项目根目录，或者通过gr.Blocks的static_dir参数指定静态文件目录。如果是动态生成的视频，需确保生成后保存到Gradio能访问的路径。

2. 最简修正代码

def update_video(input_video):
    # 确保_out.mp4存在于项目根目录，直接返回文件名即可
    # 若需基于原视频路径替换，要保证目标文件路径正确且存在
    return "your_video_out.mp4"

with gr.Blocks(theme=gr.themes.Soft()) as interface: 
    video_component = gr.Video()  # 可简写为gr.Video()，无需components前缀
    update_btn = gr.Button('Update')

    # 直接将输出绑定到视频组件，返回路径即可完成更新
    update_btn.click(update_video, inputs=video_component, outputs=video_component)

interface.launch(height=700)

3. 动态生成视频场景示例（可选）

如果_out.mp4是基于上传视频处理生成的，需先完成视频处理并保存到持久化路径：

import cv2
import os

def process_uploaded_video(input_path):
    # 示例：对上传视频做简单处理并保存到项目根目录
    cap = cv2.VideoCapture(input_path)
    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    output_path = "processed_out.mp4"
    frame_width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
    frame_height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
    out = cv2.VideoWriter(output_path, fourcc, 20.0, (frame_width, frame_height))

    while cap.isOpened():
        ret, frame = cap.read()
        if not ret:
            break
        out.write(frame)
    
    cap.release()
    out.release()
    return output_path

def update_video(input_video):
    if not input_video:
        return None
    # 先处理视频生成目标文件，再返回路径
    return process_uploaded_video(input_video)

with gr.Blocks(theme=gr.themes.Soft()) as interface: 
    video_component = gr.Video()
    update_btn = gr.Button('Update')

    update_btn.click(update_video, inputs=video_component, outputs=video_component)

interface.launch(height=700)

关键注意事项 #

• 所有需加载的视频文件必须在Gradio可访问范围内，默认是项目根目录，也可通过interface.launch(server_dir="指定目录")自定义静态文件目录。
• 用户上传的临时文件会在会话结束后被Gradio删除，动态生成的视频务必保存到持久化路径。

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