Dash Python点击图表更新html.Video源回调报错如何解决

核心错误原因 #

• 回调函数参数数量与输入项数量不匹配：你注册的回调仅传入1个Input（hist的clickData），但updateVideo函数定义了2个入参clk_data、src，参数数量不一致直接触发回调运行报错。
• 次要问题：布局中html.Video的初始src赋值为空字典{}，不符合该属性要求的字符串类型格式，可能引发初始渲染异常。

修复代码 #

第一步：修正回调参数 #

直接删除函数中多余的src参数即可：

@app.callback (
    Output('video_player', 'src'),
    [Input('hist', 'clickData')]
)
def updateVideo(clk_data):
    if clk_data is None:
        video_src = "https://www.w3schools.com/html/mov_bbb.mp4"
    else:
        print(f'click data: {clk_data}')
        video_src = "http://techslides.com/demos/sample-videos/small.webm"
    return video_src

第二步：修正初始src赋值（可选但推荐） #

将布局中html.Video的初始src改为空字符串或默认视频地址：

html.Video(
    controls=True,
    id='video_player',
    src="", # 替换原有的空字典{}
    autoPlay=False,
    style={'width': "70%"}
),

优化方案（解决视频缓存不刷新问题） #

如果修复后出现src变更但视频未刷新的情况，是浏览器缓存导致的，可通过新增key属性强制组件重新渲染：

1. 布局中给html.Video新增key属性：

html.Video(
    controls=True,
    id='video_player',
    src="",
    key="", # 新增key属性
    autoPlay=False,
    style={'width': "70%"}
),

2. 回调同时输出src和key：

@app.callback (
    [Output('video_player', 'src'),
     Output('video_player', 'key')],
    [Input('hist', 'clickData')]
)
def updateVideo(clk_data):
    if clk_data is None:
        video_src = "https://www.w3schools.com/html/mov_bbb.mp4"
    else:
        print(f'click data: {clk_data}')
        video_src = "http://techslides.com/demos/sample-videos/small.webm"
    return video_src, video_src

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