Dash Player
Dash Player is a Dash component for playing audio and video content. It can use files in your app as well as URLs from YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Dash Player is wrapped around the react-player component.
Dash Player exposes the various controls and properties of React Player as Dash component properties, which you can modify via callback functions. This not only allows you to add video playback capabilities to your Dash app, but also enable interactivity with the video player using other Dash components.
Quickstart
pip install dash-player
Import Dash Player with:
import dash_player as dp
Example
Note:
- The checklist component interacts with the
playingandmutedproperties, allowing you to toggle them on and off. - Entering a number in the
dcc.Inputcomponent and pressing the “seekTo” button allows you to interact with theseekToproperty seek to a given point in the video, specified in seconds. - The
currentTime,secondsLoaded, anddurationproperties are displayed in their respectivedivs via callback. - The
dcc.Slidercomponents to the right control thevolume,playbackRate,intervalCurrentTime,intervalSecondsLoaded, andintervalDurationproperties of thedash-player.
from dash import Dash, dcc, html, Input, Output, State, callback
import dash_player
app = Dash()
app.layout = html.Div(
[
html.Div(
[
html.Div(
style={"width": "48%", "padding": "0px"},
children=[
dash_player.DashPlayer(
id="player",
url="https://youtu.be/d5pb9TgCGc0",
controls=True,
width="100%",
height="250px",
),
dcc.Checklist(
id="bool-props-radio",
options=[
{"label": val.capitalize(), "value": val}
for val in [
"playing",
"loop",
"controls",
"muted",
]
],
value=["controls"],
inline=True,
style={"margin": "20px 0px"},
),
html.Div(
[
dcc.Input(
id="seekto-number-input",
type="number",
placeholder="seekTo value",
style={"width": "calc(100% - 115px)"},
),
html.Button(
"seekTo",
id="seekto-number-btn",
style={"width": "105px"},
),
],
style={"margin": "20px 0px"},
),
html.Div(
[
html.Div(
id="current-time-div",
style={"margin": "10px 0px"},
),
html.Div(
id="seconds-loaded-div",
style={"margin": "10px 0px"},
),
html.Div(
id="duration-div",
style={"margin": "10px 0px"},
),
],
style={
"display": "flex",
"flexDirection": "column",
},
),
],
),
html.Div(
style={"width": "48%", "padding": "10px"},
children=[
html.P("Volume:", style={"marginTop": "30px"}),
dcc.Slider(
id="volume-slider",
min=0,
max=1,
step=0.05,
value=0.5,
updatemode="drag",
marks={0: "0%", 0.5: "50%", 1: "100%"},
),
html.P("Playback Rate:", style={"marginTop": "25px"}),
dcc.Slider(
id="playback-rate-slider",
min=0,
max=2,
step=None,
updatemode="drag",
marks={i: str(i) + "x" for i in [0, 0.5, 1, 1.5, 2]},
value=1,
),
html.P(
"Update Interval for Current Time:",
style={"marginTop": "30px"},
),
dcc.Slider(
id="intervalCurrentTime-slider",
min=0,
max=1000,
step=None,
updatemode="drag",
marks={i: str(i) for i in [0, 250, 500, 750, 1000]},
value=250,
),
html.P(
"Update Interval for Seconds Loaded:",
style={"marginTop": "30px"},
),
dcc.Slider(
id="intervalSecondsLoaded-slider",
min=0,
max=1000,
step=None,
updatemode="drag",
marks={i: str(i) for i in [0, 250, 500, 750, 1000]},
value=500,
),
html.P(
"Update Interval for Duration:",
style={"marginTop": "30px"},
),
dcc.Slider(
id="intervalDuration-slider",
min=0,
max=1000,
step=None,
updatemode="drag",
marks={i: str(i) for i in [0, 250, 500, 750, 1000]},
value=500,
),
],
),
],
style={
"display": "flex",
"flexDirection": "row",
"justifyContent": "space-between",
},
),
]
)
@callback(
Output("player", "playing"),
Output("player", "loop"),
Output("player", "controls"),
Output("player", "muted"),
Input("bool-props-radio", "value"),
)
def update_bool_props(values):
playing = "playing" in values
loop = "loop" in values
controls = "controls" in values
muted = "muted" in values
return playing, loop, controls, muted
@callback(
Output("player", "seekTo"),
Input("seekto-number-btn", "n_clicks"),
State("seekto-number-input", "value"),
)
def set_prop_seekTo(n_clicks, seekto):
return seekto
@callback(
Output("current-time-div", "children"),
Input("player", "currentTime"),
)
def display_currentTime(currentTime):
return f"Current Time: {currentTime}"
@callback(
Output("seconds-loaded-div", "children"),
Input("player", "secondsLoaded"),
)
def display_secondsLoaded(secondsLoaded):
return f"Second Loaded: {secondsLoaded}"
@callback(
Output("duration-div", "children"),
Input("player", "duration"),
)
def display_duration(duration):
return f"Duration: {duration}"
@callback(
Output("player", "volume"),
Input("volume-slider", "value"),
)
def set_volume(value):
return value
@callback(
Output("player", "playbackRate"),
Input("playback-rate-slider", "value"),
)
def set_playbackRate(value):
return value
@callback(
Output("player", "intervalCurrentTime"),
Input("intervalCurrentTime-slider", "value"),
)
def set_intervalCurrentTime(value):
return value
@callback(
Output("player", "intervalSecondsLoaded"),
Input("intervalSecondsLoaded-slider", "value"),
)
def set_intervalSecondsLoaded(value):
return value
@callback(
Output("player", "intervalDuration"),
Input("intervalDuration-slider", "value"),
)
def set_intervalDuration(value):
return value
if __name__ == "__main__":
app.run(debug=True)
Volume:
Playback Rate:
Update Interval for Current Time:
Update Interval for Seconds Loaded:
Update Interval for Duration:
Changes to Dash Player were sponsored by Volkswagen’s Center of Excellence for Battery Systems.
<img>
DashPlayer Properties
Access this documentation in your Python terminal with:
```pythonhelp(dash_player.DashPlayer)
```
Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Used to identify the CSS class of the Dash Player component.
url (string; optional):
The url of the media to be played.
playing (boolean; default False):
Whether or not the media is currently playing. Can be set to True or
False to play and pause the media, respectively.
loop (boolean; default False):
Whether or not the media will loop once the player reaches the end.
Can be set to True or False to set looping on or off, respectively.
controls (boolean; default False):
Set to True or False to display native player controls Vimeo, Twitch
and Wistia player will always display controls.
volume (number; optional):
A number between 0 and 1 representing the volume of the player. If set
to None, Dash Player ises default volume on all players.
muted (boolean; default False):
Set to True or False to mute or unmute player volume, respectively.
Only works if volume is set.
playbackRate (number; default 1):
Set the playback rate of the player Only supported by YouTube, Wistia,
and file paths.
width (string; default '640px'):
A number or string representing the pixel width of the player.
height (string; default '360px'):
A number or string representing the pixel height of the player.
style (dict; optional):
Optional additional CSS styles. If width or height are supplied within
style, then this will override the component-level width or height.
playsinline (boolean; default False):
Applies the html5 playsinline attribute where supported, which allows
videos to be played inline and will not automatically enter fullscreen
mode when playback begins (for iOS).
currentTime (number; optional):
Returns the number of seconds that have been played.
secondsLoaded (number; optional):
Returns the number of seconds that have been loaded.
duration (number; optional):
Returns the duration (in seconds) of the currently playing media.
intervalCurrentTime (number; default 100):
Interval in milliseconds at which currentTime prop is updated.
intervalSecondsLoaded (number; default 500):
Interval in milliseconds at which secondsLoaded prop is updated.
intervalDuration (number; default 500):
Interval in milliseconds at which duration prop is updated.
seekTo (number; optional):
Seek to the given number of seconds, or fraction if amount is between
0 and 1.