将滑块与 Video Dash Plotly 的 CurrentTime 同步 实施说明

如何解决将滑块与 Video Dash Plotly 的 CurrentTime 同步 实施说明

我正在构建一个 Dash 应用程序，它将播放视频并由播放/暂停按钮控制。在视频上方，我有一个滑块，允许用户跳到视频中的任何部分（10 秒长）。我希望能够在视频播放时让滑块移动。

这是我迄今为止尝试过的：

import os
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_player as player
from flask import Flask,Response
from dash.dependencies import Input,Output,State

server = Flask(__name__)
app = dash.Dash(__name__,server=server)


app.layout = html.Div(
    children=[
        html.Div(
            children=[
                html.Div([
                    html.Button('Play/Pause',id='play-button',n_clicks=0),],style={
                    'width':'10%','display':'inline-block'
                }),html.Div([
                    dcc.Slider(id='slider',min=0,max=10,step=1,value=0,marks={0: {'label': '0s','style': {'color': 'black'}},2: {'label': '2s',4: {'label': '4s',6: {'label': '6s',8: {'label': '8s',10: {'label': '10s','style': {'color': 'black'}}
                                }
                    ),style={
                    'width':'90%','display':'inline-block'
                })
               
             ]
        ),html.Div(
            children=[
                player.DashPlayer(
                    id='video-player',url='https://www.w3schools.com/html/mov_bbb.mp4',controls=False,width='100%'
                )
            ]
        )    
    ]
)

#Use slider to skip to or "seekTo" different spots in video
@app.callback(Output('video-player','seekTo'),Input('slider','value'))
def set_seekTo(value):
    return value

#Press button to play/pause video 1
@app.callback(
    Output("video-player","playing"),Output("slider","value"),Input("play-button","n_clicks"),State("video-player",State('slider','value'),"currentTime")
)
def play_video(n_clicks,playing,value,currentTime):
    value = currentTime
    if n_clicks:
        return not playing,value
    return playing,value




if __name__ == "__main__":
    app.run_server(debug=True,port=8050)

播放/暂停按钮工作正常，但忽略了将滑块与视频的当前时间同步的功能。没有错误信息。我在这里缺少什么？任何帮助将不胜感激！

解决方法

注意：我最初想将此作为评论，因为我无法让 fbprophet 功能与同步时间和滑块一起工作，但是对我的实现的解释太长而无法发表评论。下面列出了一种可以根据 dash player 组件的 seekTo 更新滑块值的方法，但不实现 currentTime。

---

实施

seekTo

说明

上述实现的想法是创建一个回调以在每次 import os import dash import dash_html_components as html import dash_core_components as dcc import dash_player as player from flask import Flask,Response from dash.dependencies import Input,Output,State app = dash.Dash(__name__) app.layout = html.Div( children=[ html.Div( children=[ html.Div( [ html.Button("Play/Pause",id="play-button",n_clicks=0),],style={"width": "10%","display": "inline-block"},),html.Div( [ dcc.Slider( id="slider",min=0,max=10,step=1,value=0,marks={ 0: {"label": "0s","style": {"color": "black"}},2: {"label": "2s",4: {"label": "4s",6: {"label": "6s",8: {"label": "8s",10: {"label": "10s",},style={"width": "90%",] ),html.Div( children=[ player.DashPlayer( id="video-player",url="https://www.w3schools.com/html/mov_bbb.mp4",controls=False,width="100%",) ] ),] ) @app.callback(Output("slider","value"),Input("video-player","currentTime")) def update_slider(current_time): return current_time @app.callback( Output("video-player","playing"),Input("play-button","n_clicks"),State("video-player",) def play_video(n_clicks,playing): if n_clicks: return not playing return playing if __name__ == "__main__": app.run_server(debug=True,port=8050) 间隔更改时更新滑块值，并创建一个回调以在按下 currentTime 时处理播放和暂停视频。

请记住，我使用 play-button 作为输入，因此每次此值更改时都会调用回调。 It seems to change every 40 ms by default。您可以通过在 currentTime 上设置 intervalCurrentTime 道具来更改此间隔。

还请记住，此处的滑块值只会每秒更改一次，因为 DashPlayer 设置为 step。因此，如果您想要不同的行为，请将 1 值与 step 结合使用。