react-dplayer demo

Gitpod

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

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

Install

npm install react-dplayer -D

Usage

commonjs

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

<link rel="stylesheet" href="https://unpkg.com/dplayer/dist/DPlayer.min.css">
<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

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | options | Object | -- | read doc |

Events

camel-case rule example play as onPlay

| Name | Params | Description | | ---- | ------ | ----------- | | allEvent | default | read 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.