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

Dash Player Custom Component - Playing and controlling your videos with Dash

Hey all! I just created this Dash wrapper around the well known react-player component. I added all the relevant properties, every single instance methods, as well as supplementary props to control update intervals of the methods.

Feedback are appreciated! Feel free to create an issue or fork/PR if you want to add anything :slight_smile:

Link to the repo: https://github.com/xhlulu/dash-player
Link to the usage example app: http://dash-player-usage.herokuapp.com

7 Likes

This looks like what I am looking for, for my PhD work. I have several cameras and an audio recorder recording simultaneously. I want to be able to see the videos at the times where specific sounds are detected. Are you able to start playing videos at specific times ? Can you also play local videos (i.e. not hosted on the web) ? Thanks a bunch for your help/comments.

Is it possible to add custom controls for forward and backward movement in file?

Answer would be highly appreciated!

Solved it.

Use html.Button and update the state of video player within the callback.

Here is my example callback:

@app.callback(Output('video-player', 'seekTo'),
              [Input('button-backward-25s', 'n_clicks'),
              Input('button-backward-15s', 'n_clicks'),
              Input('button-backward-10s', 'n_clicks'),
              Input('button-backward-5s', 'n_clicks'),
              Input('button-backward-3s', 'n_clicks'),
              Input('button-forward-3s', 'n_clicks'),
              Input('button-forward-5s', 'n_clicks'),
              Input('button-forward-10s', 'n_clicks'),
              Input('button-forward-15s', 'n_clicks'),
              Input('button-forward-25s', 'n_clicks'),
              ],
              [State('video-player', 'currentTime')])
def set_seekTo(min_25, min_15, min_10, min_5, min_3, plus_3, plus_5, plus_10, plus_15, plus_25, currentTime):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if currentTime is None:
        return currentTime
    elif 'button-backward-25s' in changed_id:
        return (currentTime - 25)
    elif 'button-backward-15s' in changed_id:
        return (currentTime - 15)
    elif 'button-backward-10s' in changed_id:
        return (currentTime - 10)
    elif 'button-backward-5s' in changed_id:
        return (currentTime - 5)
    elif 'button-backward-3s' in changed_id:
        return (currentTime - 3)
    elif 'button-forward-25s' in changed_id:
        return (currentTime + 25)
    elif 'button-forward-15s' in changed_id:
        return (currentTime + 15)
    elif 'button-forward-10s' in changed_id:
        return (currentTime + 10)
    elif 'button-forward-5s' in changed_id:
        return (currentTime + 5)
    elif 'button-forward-3s' in changed_id:
        return (currentTime + 3)

Thanks for this awesome component!

1 Like