Dash Player

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 ReactPlayer component.

For more detailed documentation on Dash Player and how to use it, visit the official Dash Player documentation page

For updates and more, please see the ongoing changes to this repository's issue tracker or 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.

Getting started

Here are the following steps to get started with using Dash Player in your own Dash apps

$ pip install dash-player

Documentation

| Prop | Description | Default | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | id | The ID used to identify this component in Dash callbacks. | | className | The CSS class used to identify this component in external stylesheets. | | url | The url of the media to be played. | | playing | Whether or not the media is currently playing. Can be set to True or False to play and pause the media, respectively. | false | | loop | 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. | false | | controls | Set to true or false to display native player controls. Vimeo, Twitch and Wistia player will always display controls. | false | | volume | A number between 0 and 1 representing the volume of the player. If set to None, Dash Player ises default volume on all players. | null | | muted | Set to true or false to mute or unmute player volume, respectively. Only works if volume is set. | false | | playbackRate | Set the playback rate of the player (only supported by YouTube, Wistia, and file paths). | | width | A number or string representing the pixel width of the player. | 640px | | height | A number or string representing the pixel height of the player. | 360px | | style | Optional additional CSS styles. If width or height are supplied within style, then this will override the component-level width or height. | {} | | playsinline | 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). | 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
• ReactPlayer - 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 - @xhluca
• Alex Hsu - Maintainer/Ongoing Developer - @alexshoe
• Alex Johnson - Code Review - @alexcjohnson

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

License

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

Partnership

Changes to dash-player were sponsored by Volkswagen's Center of Excellence for Battery Systems.