react-dplayer

Install the react-dplayer package as a development dependency using npm.

npm install react-dplayer -D

Import the DPlayer component from react-dplayer and pass a configuration object to the options prop. The options prop follows the standard DPlayer configuration schema.

import DPlayer from "react-dplayer";

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

You can use react-dplayer directly in the browser by including the required scripts via unpkg. Note that you must include dplayer, react, react-dom, and react-dplayer in that order.

<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 component accepts the following props:

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| options | Object | -- | [read doc](http://dplayer.js.org/guide.html#options) |

Events follow a camel-case rule (for example, the play event is accessed as onPlay).

| Name | Params | Description |
| ---- | ------- | ----------- |
| allEvent | default | [read doc](http://dplayer.js.org/guide.html#event-binding) |

Use the following npm scripts for local development and building:

• npm run start: Run the built-in example application in development mode.
• npm run compile: Build the package for CommonJS environments.
• npm run dist: Build the package for UMD (browser) distribution.

The options prop accepts an object that is passed directly to the DPlayer constructor. This allows you to configure all features supported by the underlying dplayer library, such as video sources, danmaku settings, and context menus.

Note that the component provides some default values for lang (set to 'zh-cn') and a default contextmenu if not overridden by your options object.

<DPlayerComponent 
  options={{ 
    lang: 'en',
    video: { 
      url: 'https://example.com/video.mp4' 
    },
    danmaku: { 
      auto: true 
    }
  }} 
/>

The DPlayerComponent is the primary component for embedding a DPlayer instance into a React application. It wraps the underlying dplayer library, allowing you to pass configuration via an options prop and handle player lifecycle via an onLoad callback.

When the component mounts, it initializes the player within a div container. You can pass any standard HTML div attributes (like style or id) directly to the component, as they are applied to the wrapper element.

import DPlayerComponent from 'react-dplayer';

// Example usage
<DPlayerComponent 
  options={{ 
    video: { url: 'https://example.com/video.mp4' } 
  }} 
  onLoad={(player) => {
    console.log('Player loaded:', player);
  }}
/>

The react-dplayer package provides a default export of the DPlayer component. You can import it into your React application to wrap a DPlayer instance within a React component lifecycle.

import DPlayer from 'react-dplayer';