在 Dash 中点击图表更新视频源 Python

Updating video source on graph click in Dash Python

我的应用程序布局中有一个 html.video 元素以及一个图表,当我单击图表中的一个元素时,我想将视频元素更新为与数据集的该部分对应的视频.

以下是我设置应用程序布局的方式。

app.layout = html.Div([

    html.H1("Belfast Harbor Data Overview", style ={'text-align': 'center'}),

    #Droptown for machine type

    dcc.Dropdown(id="slct_machine",
                 options=[{'label': k, 'value': k} for k in all_options.keys()],
                 multi=False,
                 value=options1[0],
                 style={'width': "70%"}

                 ),

    #Dropdown for date
    dcc.Dropdown(id="selct_date",
                 style={'width': "70%"},
    ),

    #HTML Break
    html.Br(),
   
    dcc.Graph(id='hist', figure={}, style={'width': "90%"},
        config={
            'staticPlot': False,  # True, False
            'scrollZoom': True,  # True, False
            'doubleClick': 'reset',  # 'reset', 'autosize' or 'reset+autosize', False
            'showTips': False,  # True, False
            'displayModeBar': True,  # True, False, 'hover'
            'watermark': True,
                  # 'modeBarButtonsToRemove': ['pan2d','select2d'],
              },),


    html.Video(
        controls=True,
        id='video_player',
        src={},
        autoPlay=False,
        style={'width': "70%"}
    ),

在此之后,我有一些图形回调函数和一个用数据填充图形的函数。

在此之后,我有另一个应用程序回调,在这里我试图用一些测试数据更新视频播放器。我这样做如下:

@app.callback (
    Output('video_player', 'src'),
    [Input('hist', 'clickData')]
)

def updateVideo(clk_data, src):
    if clk_data is None:
        video_src = "https://www.w3schools.com/html/mov_bbb.mp4"
    else:
        print(f'hover data: {clk_data}')
        video_src = "http://techslides.com/demos/sample-videos/small.webm"
    return video_src

我在执行此操作时收到以下回调错误:

我不太确定为什么 src 没有更新,因为传递组件对于图形和容器来说似乎是这样工作的。

该应用程序还有其他元素,但我认为它们并不重要,因为视频源是未更新的部分。

如果需要我可以提供所有代码,但我觉得我只是错误地更新了视频源。

函数定义中的参数数量(目前为两个)必须与回调的输入数量(+状态数量)相匹配(目前为一个)。因此,您应该删除(未使用的)src 参数,或添加另一个输入或状态。