mirror of
https://github.com/gosticks/dash-player.git
synced 2025-10-16 11:55:36 +00:00
Fix dash import warnings
This commit is contained in:
Alex Hsu
parent
32b00052b5
commit
e57b766f22
@ -2,226 +2,211 @@ from textwrap import dedent
|
||||
|
||||
import dash_player
|
||||
import dash
|
||||
import dash_html_components as html
|
||||
import dash_core_components as dcc
|
||||
from dash.dependencies import Input, Output, State
|
||||
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.mp4',
|
||||
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('''
|
||||
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.mp4",
|
||||
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'
|
||||
]],
|
||||
values=['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
|
||||
),
|
||||
]
|
||||
),
|
||||
])
|
||||
"""
|
||||
)
|
||||
),
|
||||
],
|
||||
),
|
||||
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"]
|
||||
],
|
||||
values=["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', 'values')])
|
||||
@app.callback(Output("video-player", "playing"), [Input("radio-bool-props", "values")])
|
||||
def update_prop_playing(values):
|
||||
return 'playing' in values
|
||||
return "playing" in values
|
||||
|
||||
|
||||
@app.callback(Output('video-player', 'loop'),
|
||||
[Input('radio-bool-props', 'values')])
|
||||
@app.callback(Output("video-player", "loop"), [Input("radio-bool-props", "values")])
|
||||
def update_prop_loop(values):
|
||||
return 'loop' in values
|
||||
return "loop" in values
|
||||
|
||||
|
||||
@app.callback(Output('video-player', 'controls'),
|
||||
[Input('radio-bool-props', 'values')])
|
||||
@app.callback(Output("video-player", "controls"), [Input("radio-bool-props", "values")])
|
||||
def update_prop_controls(values):
|
||||
return 'controls' in values
|
||||
return "controls" in values
|
||||
|
||||
|
||||
@app.callback(Output('video-player', 'muted'),
|
||||
[Input('radio-bool-props', 'values')])
|
||||
@app.callback(Output("video-player", "muted"), [Input("radio-bool-props", "values")])
|
||||
def update_prop_muted(values):
|
||||
return 'muted' in values
|
||||
return "muted" in values
|
||||
|
||||
|
||||
@app.callback(Output('video-player', 'volume'),
|
||||
[Input('slider-volume', 'value')])
|
||||
@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')])
|
||||
@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')])
|
||||
@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')])
|
||||
@app.callback(
|
||||
Output("div-current-time", "children"), [Input("video-player", "currentTime")]
|
||||
)
|
||||
def update_time(currentTime):
|
||||
return 'Current Time: {}'.format(currentTime)
|
||||
return "Current Time: {}".format(currentTime)
|
||||
|
||||
|
||||
@app.callback(Output('div-method-output', 'children'),
|
||||
[Input('video-player', 'secondsLoaded')],
|
||||
[State('video-player', 'duration')])
|
||||
@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)
|
||||
return "Second Loaded: {}, Duration: {}".format(secondsLoaded, duration)
|
||||
|
||||
|
||||
@app.callback(Output('video-player', 'intervalCurrentTime'),
|
||||
[Input('slider-intervalCurrentTime', 'value')])
|
||||
@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')])
|
||||
@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')])
|
||||
@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')])
|
||||
@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)
|
||||
if __name__ == "__main__":
|
||||
app.run_server(debug=True)
|
||||
|
||||
@ -1,47 +1,46 @@
|
||||
import dash_player
|
||||
import dash
|
||||
import dash_html_components as html
|
||||
import dash_core_components as dcc
|
||||
from dash.dependencies import Input, Output, State
|
||||
from dash import dcc, html, Input, Output, State
|
||||
|
||||
app = dash.Dash(__name__)
|
||||
|
||||
app.scripts.config.serve_locally = True
|
||||
|
||||
|
||||
app.layout = html.Div([
|
||||
dash_player.DashPlayer(
|
||||
id='video-player',
|
||||
url='http://media.w3.org/2010/05/bunny/movie.mp4',
|
||||
controls=True
|
||||
),
|
||||
|
||||
html.Button('Set seekTo to 10', id='button-seek-to'),
|
||||
|
||||
html.Div(id='div-current-time', style={'margin-bottom': '20px'}),
|
||||
|
||||
html.Div(id='div-method-output')
|
||||
])
|
||||
app.layout = html.Div(
|
||||
[
|
||||
dash_player.DashPlayer(
|
||||
id="video-player",
|
||||
url="http://media.w3.org/2010/05/bunny/movie.ogv",
|
||||
controls=True,
|
||||
),
|
||||
html.Button("Set seekTo to 10", id="button-seek-to"),
|
||||
html.Div(id="div-current-time", style={"margin-bottom": "20px"}),
|
||||
html.Div(id="div-method-output"),
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
@app.callback(Output('div-current-time', 'children'),
|
||||
[Input('video-player', 'currentTime')])
|
||||
@app.callback(
|
||||
Output("div-current-time", "children"), [Input("video-player", "currentTime")]
|
||||
)
|
||||
def update_time(currentTime):
|
||||
return 'Current Time: {}'.format(currentTime)
|
||||
return "Current Time: {}".format(currentTime)
|
||||
|
||||
|
||||
@app.callback(Output('div-method-output', 'children'),
|
||||
[Input('video-player', 'secondsLoaded')],
|
||||
[State('video-player', 'duration')])
|
||||
@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)
|
||||
return "Second Loaded: {}, Duration: {}".format(secondsLoaded, duration)
|
||||
|
||||
|
||||
@app.callback(Output('video-player', 'seekTo'),
|
||||
[Input('button-seek-to', 'n_clicks')])
|
||||
@app.callback(Output("video-player", "seekTo"), [Input("button-seek-to", "n_clicks")])
|
||||
def set_seekTo(n_clicks):
|
||||
return 10
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run_server(debug=True)
|
||||
if __name__ == "__main__":
|
||||
app.run_server(debug=True)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user