GitPedia

React dplayer

react-dplayer

From MoePlayer·Updated November 11, 2024·View on GitHub·
·Archived

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately. The project is written primarily in JavaScript, distributed under the MIT License license, first published in 2017. Key topics include: component, dplayer, player, react-dplayer, video.

Latest release: 0.4.2
October 4, 2020View Changelog →

Build Status
Version
NPM
LICENSE

react-dplayer demo next demo

Gitpod

Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.

Open in Gitpod

React component for Dplayer based on DPlayer(V1.26.0).

Install

bash
npm install react-dplayer -D

Usage

commonjs

js
import DPlayer from "react-dplayer"; class Example extends Component { render() { return ( <DPlayer options={{ video:{url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4'} }} /> ) } }

browser

html
<script src="https://unpkg.com/dplayer/dist/DPlayer.min.js" /> <script src="https://unpkg.com/react/dist/react.min.js" /> <script src="https://unpkg.com/react-dom/dist/react-dom.min.js" /> <script src="https://unpkg.com/react-dplayer/dist/react-dplayer.min.js" /> <div id="example"></div> <script > ReactDOM.render(React.createElement( 'div', { style: { width: 800, margin: '0px auto' } }, React.createElement(ReactDPlayer, {options:{video: {url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4'} }}) ), document.getElementById('example')); </script>

The package also includes an in-built example under the /example folder. Run the sample application by cloning project and running npm start.

Dplayer Doc

Props

NameTypeDefaultDescription
optionsObject--read doc

Events

camel-case rule example play as onPlay

NameParamsDescription
allEventdefaultread doc

Development

  • npm run start: Run example in development mode
  • npm run compile: Build react-dplayer(commonjs)
  • npm run dist: dist react-dplayer (umd)

License

react-dplayer is released under the MIT license.

Contributors

Showing top 3 contributors by commit count.

View all contributors on GitHub →

This article is auto-generated from MoePlayer/react-dplayer via the GitHub API.Last fetched: 6/22/2026