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.