Wow, such a lovely HTML5 danmaku video player
Screenshot
$ npm install dplayer --save
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>var dp = new DPlayer(option);Options
var option = {
element: document.getElementById('player1'), // Optional, player element
autoplay: false, // Optional, autoplay video, not supported by mobile browsers
theme: '#FADFA3', // Optional, theme color, default: #b7daff
loop: true, // Optional, loop play music, default: true
lang: 'zh', // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
screenshot: true, // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
hotkey: true, // Optional, binding hot key, including left right and Space, default: true
preload: 'auto', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
video: { // Required, video info
url: '若能绽放光芒.mp4', // Required, video url
pic: '若能绽放光芒.png' // Optional, music picture
},
danmaku: { // Optional, showing danmaku, ignore this option to hide danmaku
id: '9E2E3368B56CDBB4', // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://dplayer.daoapp.io/list`
api: 'https://dplayer.daoapp.io/', // Required, danmaku api
token: 'tokendemo', // Optional, danmaku token for api
maximum: 1000 // Optional, maximum quantity of danmaku
}
}API
dp.play()// Resume playdp.play(time)// Set currentTimedp.pause()// Pausedp.toggle()// Toggle between play and pausedp.on(event, handler)// Event bindingdp.dan// Return danmaku infodp.danIndex// Return danmaku indexdp.video// Return native video, most native api are supporteddp.video.currentTime// Returns the current playback positiondp.video.loop// Returns whether the video should start over again when finished- Most native api
Event binding
dp.on(event, handler)
event:
play: Triggered when DPlayer start playpause: Triggered when DPlayer pausedcanplay: Triggered when enough data is available that DPlayer can be playedplaying: Triggered periodically when DPlayer is playingended: Triggered when DPlayer endederror: Triggered when an error occurs
Live Video (HTTP Live Streaming, M3U8 format)
It requires the library hls.js and it should be loaded before DPlayer.min.js.
Live danamku is not supported yet.
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/hls.min.js"></script>
<script src="dist/DPlayer.min.js"></script>
<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.m3u8'
// ...
}
});
</script>Work with module bundler
var DPlayer = require('DPlayer');
var dp = new DPlayer(option);Ready-made API:
https://dplayer.daoapp.io/
Build yourself:
Required environment
- Node.js
- Mongodb
$ npm install
$ npm run dev
$ npm install
$ npm run build