dash-player/usage-advanced.py

from textwrap import dedent

import dash_player
import dash
from dash import dcc, html, Input, Output, State

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

app.scripts.config.serve_locally = True

app.layout = html.Div(
    [
        html.Div(
            style={"width": "40%", "float": "left", "margin": "0% 5% 1% 5%"},
            children=[
                dash_player.DashPlayer(
                    id="video-player",
                    url="http://media.w3.org/2010/05/bunny/movie.ogv",
                    controls=True,
                    width="100%",
                ),
                html.Div(id="div-current-time", style={"margin": "10px 0px"}),
                html.Div(id="div-method-output", style={"margin": "10px 0px"}),
                dcc.Markdown(
                    dedent(
                        """
            ### Video Examples
            * mp4: http://media.w3.org/2010/05/bunny/movie.mp4
            * mp3: https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp3
            * webm: https://media.w3.org/2010/05/sintel/trailer.webm
            * ogv: http://media.w3.org/2010/05/bunny/movie.ogv
            * Youtube: https://www.youtube.com/watch?v=sea2K4AuPOk
            """
                    )
                ),
            ],
        ),
        html.Div(
            style={"width": "30%", "float": "left"},
            children=[
                dcc.Input(
                    id="input-url", value="http://media.w3.org/2010/05/bunny/movie.mp4"
                ),
                html.Button("Change URL", id="button-update-url"),
                dcc.Checklist(
                    id="radio-bool-props",
                    options=[
                        {"label": val.capitalize(), "value": val}
                        for val in ["playing", "loop", "controls", "muted"]
                    ],
                    value=["controls"],
                ),
                html.P("Volume:", style={"margin-top": "10px"}),
                dcc.Slider(
                    id="slider-volume",
                    min=0,
                    max=1,
                    step=0.05,
                    value=None,
                    updatemode="drag",
                    marks={0: "0%", 1: "100%"},
                ),
                html.P("Playback Rate:", style={"margin-top": "25px"}),
                dcc.Slider(
                    id="slider-playback-rate",
                    min=0,
                    max=4,
                    step=None,
                    updatemode="drag",
                    marks={i: str(i) + "x" for i in [0, 0.25, 0.5, 0.75, 1, 2, 3, 4]},
                    value=1,
                ),
                html.P(
                    "Update Interval for Current Time:", style={"margin-top": "30px"}
                ),
                dcc.Slider(
                    id="slider-intervalCurrentTime",
                    min=40,
                    max=1000,
                    step=None,
                    updatemode="drag",
                    marks={i: str(i) for i in [40, 100, 200, 500, 1000]},
                    value=100,
                ),
                html.P(
                    "Update Interval for seconds loaded:", style={"margin-top": "30px"}
                ),
                dcc.Slider(
                    id="slider-intervalSecondsLoaded",
                    min=200,
                    max=2000,
                    step=None,
                    updatemode="drag",
                    marks={i: str(i) for i in [200, 500, 750, 1000, 2000]},
                    value=500,
                ),
                html.P("Update Interval for duration:", style={"margin-top": "30px"}),
                dcc.Slider(
                    id="slider-intervalDuration",
                    min=200,
                    max=2000,
                    step=None,
                    updatemode="drag",
                    marks={i: str(i) for i in [200, 500, 750, 1000, 2000]},
                    value=500,
                ),
                html.P("Seek To:", style={"margin-top": "30px"}),
                dcc.Slider(
                    id="slider-seek-to",
                    min=0,
                    max=1,
                    step=None,
                    updatemode="drag",
                    marks={i: str(i * 100) + "%" for i in [0, 0.25, 0.5, 0.75, 1]},
                    value=0,
                ),
            ],
        ),
    ]
)


@app.callback(Output("video-player", "playing"), [Input("radio-bool-props", "value")])
def update_prop_playing(values):
    return "playing" in values


@app.callback(Output("video-player", "loop"), [Input("radio-bool-props", "value")])
def update_prop_loop(values):
    return "loop" in values


@app.callback(Output("video-player", "controls"), [Input("radio-bool-props", "value")])
def update_prop_controls(values):
    return "controls" in values


@app.callback(Output("video-player", "muted"), [Input("radio-bool-props", "value")])
def update_prop_muted(values):
    return "muted" in values


@app.callback(Output("video-player", "volume"), [Input("slider-volume", "value")])
def update_volume(value):
    return value


@app.callback(
    Output("video-player", "playbackRate"), [Input("slider-playback-rate", "value")]
)
def update_playbackRate(value):
    return value


@app.callback(
    Output("video-player", "url"),
    [Input("button-update-url", "n_clicks")],
    [State("input-url", "value")],
)
def update_url(n_clicks, value):
    return value


# Instance Methods
@app.callback(
    Output("div-current-time", "children"), [Input("video-player", "currentTime")]
)
def update_time(currentTime):
    return "Current Time: {}".format(currentTime)


@app.callback(
    Output("div-method-output", "children"),
    [Input("video-player", "secondsLoaded")],
    [State("video-player", "duration")],
)
def update_methods(secondsLoaded, duration):
    return "Second Loaded: {}, Duration: {}".format(secondsLoaded, duration)


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


@app.callback(
    Output("video-player", "intervalSecondsLoaded"),
    [Input("slider-intervalSecondsLoaded", "value")],
)
def update_intervalSecondsLoaded(value):
    return value


@app.callback(
    Output("video-player", "intervalDuration"),
    [Input("slider-intervalDuration", "value")],
)
def update_intervalDuration(value):
    return value


@app.callback(Output("video-player", "seekTo"), [Input("slider-seek-to", "value")])
def set_seekTo(value):
    return value


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