Black Lives Matter. Please consider donating to Black Girls Code today.

Getting video current time in Dash app


I am trying to build a small app that has video in it and need to be able to get current video time real time. Value would be used to update chart, i.e. I want to move vertical shapes line based off current time.

I found this thread which should give me what I need but Events have been removed from latest Dash version so it doesn’t work.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

external_stylesheets = ['']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children = [

    html.Div(children = [
            controls = True,
            id = 'movie_player',
    html.Div(children = [
            id = 'mean_chart',
            figure = {
                'data': [go.Scatter(
                    x = [0,1,2,3,4,5,6,7,8,9,10],
                    y = [0,1,2,4,5,4,3,5,3,2,1],
                'layout': go.Layout(
                    xaxis = {
                        'title': 'Second',
                        'type': 'linear',
                    yaxis = {
                        'title': 'Average score',
                    shapes = [{
                        'type': 'line',
                        'x0': 3,
                        'y0': -1,
                        'x1': 3,
                        'y1': 6,

if __name__ == '__main__':
    app.run_server(debug = True)

Any suggestions?

Without events I am not sure how well it will work BUT this component outputs its current cursor location which you could use to draw your line.

Saw this wrapper earlier but couldn’t make it work until added this callback in my code. Thought I don’t need it in my case.

@app.callback(Output('video-player', 'intervalCurrentTime'),
              [Input('slider-intervalCurrentTime', 'value')])
def update_intervalCurrentTime(value):
    return value

Thanks anyway