html播放video实现弹幕效果---DPlayer

先上效果

Installation

Using npm:

npm install dplayer --save

Using Yarn:

yarn add dplayer

Quick Start

At first, let's initialize a simplest DPlayer

Load DPlayer files

<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

Or work with module bundler:

import DPlayer from 'dplayer';const dp = new DPlayer(options);

Initialization in js:

const dp = new DPlayer({container: document.getElementById('dplayer'),screenshot: true,video: {url: 'demo.mp4',pic: 'demo.jpg',thumbnails: 'thumbnails.jpg',},subtitle: {url: 'webvtt.vtt',},danmaku: {id: 'demo',api: 'https://api.prprpr.me/dplayer/',},
});

Options

You can custom your player instance by those options

Name	Default	Description
container	document.querySelector('.dplayer')	player container
live	false	enable live mode, see #live
autoplay	false	video autoplay
theme	'#b7daff'	main color
loop	false	video loop
lang	navigator.language.toLowerCase()	values: 'en', 'zh-cn', 'zh-tw'
screenshot	false	enable screenshot, if true, video and video poster must enable Cross-Origin
airplay	true	enable airplay in Safari
hotkey	true	enable hotkey, support FF, FR, volume control, play & pause
preload	'auto'	values: 'none', 'metadata', 'auto'
volume	0.7	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
playbackSpeed	[0.5, 0.75, 1, 1.25, 1.5, 2]	optional playback speed, or or you can set a custom one
logo	-	showing logo in the top left corner, you can adjust its size and position by CSS
apiBackend	-	getting and sending danmaku in your way, see #live
video	-	video info
video.quality	-	see #Quality switching
video.defaultQuality	-	see #Quality switching
video.url	-	video url
video.pic	-	video poster
video.thumbnails	-	video thumbnails, generated by DPlayer-thumbnails(opens new window)
video.type	'auto'	values: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' or other custom type, see #MSE support
video.customType	-	custom video type, see #MSE support
subtitle	-	external subtitle
subtitle.url	`required`	subtitle url
subtitle.type	'webvtt'	subtitle type, values: 'webvtt', 'ass', but only webvtt is supported for now
subtitle.fontSize	'20px'	subtitle font size
subtitle.bottom	'40px'	the distance between the subtitle and player bottom, values like: '10px' '10%'
subtitle.color	'#fff'	subtitle color
danmaku	-	showing danmaku
danmaku.id	`required`	danmaku pool id, it must be unique
danmaku.api	`required`	see #Danmaku API
danmaku.token	-	back end verification token
danmaku.maximum	-	danmaku maximum quantity
danmaku.addition	-	additional danmaku, see #bilibili danmaku
danmaku.user	'DIYgod'	danmaku user name
danmaku.bottom	-	values like: '10px' '10%', the distance between the danmaku bottom and player bottom, in order to prevent warding off subtitle
danmaku.unlimited	false	display all danmaku even though danmaku overlap, notice that player will remember user setting, default setting will not work after user set it themselves
contextmenu	[]	custom contextmenu
highlight	[]	custom time markers upon progress bar
mutex	true	prevent to play multiple player at the same time, pause other players when this player start play

const dp = new DPlayer({container: document.getElementById('dplayer'),autoplay: false,theme: '#FADFA3',loop: true,lang: 'zh-cn',screenshot: true,hotkey: true,preload: 'auto',logo: 'logo.png',volume: 0.7,mutex: true,video: {url: 'dplayer.mp4',pic: 'dplayer.png',thumbnails: 'thumbnails.jpg',type: 'auto',},subtitle: {url: 'dplayer.vtt',type: 'webvtt',fontSize: '25px',bottom: '10%',color: '#b7daff',},danmaku: {id: '9E2E3368B56CDBB4',api: 'https://api.prprpr.me/dplayer/',token: 'tokendemo',maximum: 1000,addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],user: 'DIYgod',bottom: '15%',unlimited: true,},contextmenu: [{text: 'custom1',link: 'https://github.com/DIYgod/DPlayer',},{text: 'custom2',click: (player) => {console.log(player);},},],highlight: [{text: 'marker for 20s',time: 20,},{text: 'marker for 2mins',time: 120,},],
});

API

dp.play(): 播放视频
dp.pause(): 暂停视频
dp.seek(time: number): 跳转到特定时间
```
dp.seek(100);
```
dp.toggle(): 切换播放和暂停
dp.on(event: string, handler: function): 绑定视频和播放器事件，见#事件绑定

dp.switchVideo(video, danmaku): 切换到其他视频

dp.switchVideo({url: 'second.mp4',pic: 'second.png',thumbnails: 'second.jpg',},{id: 'test',api: 'https://api.prprpr.me/dplayer/',maximum: 3000,user: 'DIYgod',}
);

dp.notice(text: string, time: number): 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8
dp.switchQuality(index: number): 切换清晰度
dp.destroy(): 销毁播放器
dp.speed(rate: number): 设置视频速度
dp.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量
```
dp.volume(0.1, true, false);
```
dp.video: 原生 video
dp.video.currentTime: 返回视频当前播放时间
dp.video.duration: 返回视频总时间
dp.video.paused: 返回视频是否暂停
支持大多数原生 video 接口(opens new window)
dp.danmaku

dp.danmaku.send(danmaku, callback: function): 提交一个新弹幕

dp.danmaku.send({text: 'dplayer is amazing',color: '#b7daff',type: 'right', // should be `top` `bottom` or `right`},function () {console.log('success');}
);

dp.danmaku.draw(danmaku): 实时绘制一个新弹幕

dp.danmaku.draw({text: 'DIYgod is amazing',color: '#fff',type: 'top',
});

dp.danmaku.opacity(percentage: number): 设置弹幕透明度，透明度值在 0 到 1 之间
```
dp.danmaku.opacity(0.5);
```
dp.danmaku.clear(): 清除所有弹幕
dp.danmaku.hide(): 隐藏弹幕
dp.danmaku.show(): 显示弹幕
dp.fullScreen: 两个类型：web 和 browser，默认类型是 browser
dp.fullScreen.request(type: string): 进入全屏
```
dp.fullScreen.request('web');
```
dp.fullScreen.cancel(type: string): 退出全屏
```
dp.fullScreen.cancel('web');
```

#事件绑定

dp.on(event, handler)

dp.on('ended', function () {console.log('player ended');
});

视频事件

abort
canplay
canplaythrough
durationchange
emptied
ended
error
loadeddata
loadedmetadata
loadstart
mozaudioavailable
pause
play
playing
progress
ratechange
seeked
seeking
stalled
suspend
timeupdate
volumechange
waiting

播放器事件

screenshot
thumbnails_show
thumbnails_hide
danmaku_show
danmaku_hide
danmaku_clear
danmaku_loaded
danmaku_send
danmaku_opacity
contextmenu_show
contextmenu_hide
notice_show
notice_hide
quality_start
quality_end
destroy
resize
fullscreen
fullscreen_cancel
subtitle_show
subtitle_hide
subtitle_change

#清晰度切换

在 video.quality 里设置不同清晰度的视频链接和类型，video.defaultQuality 设置默认清晰度

Load demo

const dp = new DPlayer({container: document.getElementById('dplayer'),video: {quality: [{name: 'HD',url: 'demo.m3u8',type: 'hls',},{name: 'SD',url: 'demo.mp4',type: 'normal',},],defaultQuality: 0,pic: 'demo.png',thumbnails: 'thumbnails.jpg',},
});

#弹幕

#弹幕接口

danmaku.api

现成的接口

链接: https://api.prprpr.me/dplayer/

每日备份: DPlayer-data(opens new window)

自己搭建

DPlayer-node(opens new window)

#bilibili 弹幕

danmaku.addition

API: https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid](opens new window)

const option = {danmaku: {// ...addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'],},
};

#

查看插件地址：传送门