{分享-转}DPlayer发布，可强势插入B站PY-萌一库-月宅酱的博客

介绍

DPlayer是一款可载入B站视频与B站弹幕的轻量级视频播放框，同时支持弹幕发送并不互相影响。

图片[1]-{分享-转}DPlayer发布，可强势插入B站PY-萌一库-月宅酱的博客

使用与说明

具体参见他的GITHUB

具体

Install

$ npm install dplayer --save

Usage

HTML

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>

JS

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
addition: ['https://dplayer.daoapp.io/bilibili?aid=4157142']   // Optional, additional danmaku, see: `Bilibili 弹幕支持`
}
}

API

dp.play() // Resume play
dp.play(time) // Set currentTime
dp.pause() // Pause
dp.toggle() // Toggle between play and pause
dp.on(event, handler) // Event binding
dp.switchVideo(video, danmaku) // Switch to a new video, the format of video and danmaku is the same as option
dp.dan // Return danmaku info
dp.danIndex // Return danmaku index
dp.video // Return native video, most native api are supported
- dp.video.currentTime // Returns the current playback position
- dp.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 play
pause: Triggered when DPlayer paused
canplay: Triggered when enough data is available that DPlayer can be played
playing: Triggered periodically when DPlayer is playing
ended: Triggered when DPlayer ended
error: Triggered when an error occurs

Bilibili 弹幕支持

var option = {
danmaku: {
// ...
addition: ['https://dplayer.daoapp.io/bilibili?aid=【bilibili视频AV号】']
}
}

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);

Danmaku back-end

Ready-made API:

https://dplayer.daoapp.io/

Build yourself:

Required environment

Node.js
Mongodb

Run in development

$ npm install
$ npm run dev

Make a release

$ npm install
$ npm run build

文章版权归作者所有，未经允许请勿转载。

THE END

网络干货