Dash Player: Control and play videos using Dash

Dash Player is a dash component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. It is wrapped around the react-player component.

You can find a demo of the component here.

For updates and more, please see the dash community discussion on Dash Player.

This is a custom community component, so if your organization or company is interested in sponsoring enhancements to this project, please reach out to the Plotly Dash team.

Example from usage-advanced.py

Getting started

Here are the following steps to get started with your own apps

$ git clone https://github.com/xhlulu/dash-player.git
$ cd dash-player
$ npm install
$ python usage-advanced.py

Once that done, you can copy the dash_player package in the folder of your app, and import it within your app.

Usage

usage.py provides you with the basic functionality of the app. Use it to learn how to use the component.

usage-methods.py lets you test the props that are updated at an interval, which are originally react instance methods.

usage-advanced.py gives an overview of the full functionality of the component, and serves as an extensive testing tool.

Documentation

Prop	Description	Default
id	The ID used to identify this compnent in Dash callbacks
url	The url of a video or song to play   ◦  Can be an array or MediaStream object
playing	Set to true or false to pause or play the media	false
loop	Set to true or false to loop the media	false
controls	Set to true or false to display native player controls   ◦  Vimeo, Twitch and Wistia player will always display controls	false
volume	Set the volume of the player, between 0 and 1   ◦  null uses default volume on all players #357	null
muted	Mutes the player   ◦  Only works if volume is set	false
width	Set the width of the player	640px
height	Set the height of the player	360px
style	Add inline styles to the root element	{}
playsinline	Applies the playsinline attribute where supported	false
currentTime	Returns the number of seconds that have been played
secondsLoaded	Returns the number of seconds that have been loaded
duration	Returns the duration (in seconds) of the currently playing media
intervalCurrentTime	Interval in milliseconds at which currenTtime prop is updated.	40
intervalSecondsLoaded	Interval in milliseconds at which secondsLoaded prop is updated.	500
intervalDuration	Interval in milliseconds at which duration prop is updated.	500
seekTo	Seek to the given number of seconds, or fraction if amount is between 0 and 1	null

Built With

• Dash - Main server and interactive components
• react-player - The react component that was wrapped by this

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

• Xing Han - Initial Work - @xhlulu
• Chris - Code Review

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments