react-dplayer demo next 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.26.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

<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

Events

camel-case rule example play as onPlay

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.