将 Slider 与 Video Dash Plotly 的 CurrentTime 同步

Question

我正在构建一个 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', 'style': {'color': 'black'}},
                                      4: {'label': '4s', 'style': {'color': 'black'}},
                                      6: {'label': '6s', 'style': {'color': 'black'}},
                                      8: {'label': '8s', 'style': {'color': 'black'}},
                                      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", "playing"),
    State('slider','value'),
    State("video-player","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)

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

Answer 1

注意：我最初想发表评论，因为我无法让 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", "style": {"color": "black"}},
                                4: {"label": "4s", "style": {"color": "black"}},
                                6: {"label": "6s", "style": {"color": "black"}},
                                8: {"label": "8s", "style": {"color": "black"}},
                                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%",
                )
            ]
        ),
    ]
)


@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", "playing"),
)
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 时播放和暂停视频。

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

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