Skip to content
This repository has been archived by the owner on Dec 2, 2020. It is now read-only.

Commit

Permalink
upgrade version 0.2.0
Browse files Browse the repository at this point in the history 
fix #1
  • Loading branch information
@hnsylitao
hnsylitao committed Mar 14, 2018
1 parent ab59232 commit d684f49
Show file tree
Hide file tree
Showing 7 changed files with 4,765 additions and 790 deletions.
39 changes: 5 additions & 34 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
[![NPM](https://img.shields.io/npm/dt/react-dplayer.svg?style=flat)](https://www.npmjs.com/package/react-dplayer)
[![LICENSE](https://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://github.com/hnsylitao/react-dplayer/blob/master/LICENSE)

# react-dplayer[Live Demo](http://dplayer.89io.com/)
# react-dplayer[Live Demo](http://dplayer.89io.com/) (V1.22.2)

**React component for Dplayer** based on [DPlayer](https://github.com/DIYgod/DPlayer).

Expand Down Expand Up @@ -46,22 +46,9 @@ class Example extends Component {
ReactDOM.render(React.createElement(
'div',
{ style: { width: 800, margin: '0px auto' } },
React.createElement(ReactDPlayer, { autoplay: false,
loop: false,
screenshot: true,
hotkey: true,
logo: 'https://avatars3.githubusercontent.com/u/17537749?v=4&s=460',
danmaku: {
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 1000,
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'],
user: 'DIYgod'
},
React.createElement(ReactDPlayer, {
video: {
url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4'
} })
), document.getElementById('example'));
</script>
Expand All @@ -76,29 +63,13 @@ The package also includes an in-built example under the `/example` folder. Run t

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| autoplay | Boolean | false | autoplay video, not supported by mobile browsers |
| theme | String | #FADFA3 | theme color |
| loop | Boolean | true | loop play video |
| lang | String | zh | `zh` for Chinese, `en` for English |
| screenshot | Boolean | false | enable screenshot function |
| hotkey | Boolean | true | binding hot key, including left right and Space |
| preload | String | 'auto' | the way to load video, can be 'none' 'metadata' or 'auto' |
| logo | String | DPlayer default | player logo, showing in top left corner |
| volume | Number | DPlayer default | player volume |
| contextmenu | Array | DPlayer default | custom contextmenu |
| video| Object | DPlayer default | video.url -> video link video.pic -> video poster video.type -> video type video.quality -> video quality video.defaultQuality -> video defaultQuality|
| danmaku| Object | DPlayer default | video danmaku |
| allProps | Object | default | [read doc](http://dplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0) |

## Events

| Name | Params | Description |
| ---- | ------ | ----------- |
| onPlay | DPlayer default | Triggered when DPlayer start play |
| onPause | DPlayer default | Triggered when DPlayer paused |
| onCanplay | DPlayer default | Triggered when enough data is available that DPlayer can play |
| onPlaying | DPlayer default | Triggered periodically when DPlayer is playing |
| onEnded | DPlayer default | Triggered when DPlayer ended playing |
| onError | DPlayer default | Triggered when an error occurs |
| allEvent | default | [read doc](http://dplayer.js.org/#/zh-Hans/?id=%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A) |

## Development

Expand Down
1 change: 1 addition & 0 deletions example/example.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const path = require('path')
, HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
mode: 'development',
entry: {
bundle: ["babel-polyfill", path.resolve(srcPath, 'example.js')]
},
Expand Down
52 changes: 25 additions & 27 deletions example/example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,90 +5,88 @@ import DPlayer from "../src";

const Example = reactCreateClass({

getInitialState(){
getInitialState() {
return {
canplay: false,
play: false,
currentTime: 0,
};
},

seek(){
seek() {
this.dp.seek(10)
},

play(){
play() {
this.dp.play()
},

pause(){
pause() {
this.dp.pause()
},

onLoad(dp){
onLoad(dp) {
this.dp = dp;
console.log(dp, dp.video);
},

onCanplay(){
onCanplay() {
this.setState({
canplay: true,
})
},

onPlay(){
onPlay() {
this.setState({
play: true,
})
},

onPause(){
onPause() {
this.setState({
play: false,
})
},

onEnded(){
onEnded() {
console.log('end')
},

onError(){
onError() {
console.log('error')
},

onPlaying(){
onPlaying() {
this.setState({
currentTime: this.dp.video.currentTime,
})
},

render() {
return (
<div style={{width: 800,margin:'0px auto'}}>
<DPlayer autoplay={false}
loop={false}
screenshot={true}
hotkey={true}
<div style={{width: 800, margin: '0px auto'}}>
<DPlayer loop={false}
logo={'https://avatars3.githubusercontent.com/u/17537749?v=4&s=460'}
video={{
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
}}
subtitl={{
url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt'
}}
danmaku={{
id: '9E2E3368B56CDBB4',
api: 'https://api.prprpr.me/dplayer/',
token: 'tokendemo',
maximum: 1000,
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'],
user: 'DIYgod'
api: 'https://api.prprpr.me/dplayer/'
}}
screenshot={true}
onLoad={this.onLoad}
onPlay={this.onPlay}
onCanplay={this.onCanplay}
onPause={this.onPause}
onEnded={this.onEnded}
onError={this.onError}
onPlaying={this.onPlaying}
video={{
url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
}}/>
onPlaying={this.onPlaying}/>
<button onClick={this.play}>play</button>
<button onClick={this.pause}>pause</button>
<button onClick={this.seek}>seek 10</button>
Expand All @@ -102,6 +100,6 @@ const Example = reactCreateClass({
});

ReactDOM.render(
<Example />,
<Example/>,
document.getElementById('example')
);
Loading

0 comments on commit d684f49

Please sign in to comment.