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

先上效果InstallationUsing npm:npm install dplayer --saveUsing Yarn:yarn add dplayerQuick StartAt first, let's initialize a simplest DPlayerLoad DPlayer files<div id="dplayer"></div><script

一行注释

3156人浏览 · 2021-11-02 17:04:08

一行注释 · 2021-11-02 17:04:08 发布

先上效果

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]'],
    },
};

#

查看插件地址：传送门

EazyDevelop社区

一站式 AI 云服务平台

更多推荐

探秘深海：一款强大的深度学习框架——DeepSea

在人工智能领域中，深度学习是推动科技进步的一股强大动力。今天，我们要向大家推荐的是一个专为深度学习爱好者和开发者打造的强大框架——DeepSea。该项目由Team-Neptune团队开发，并托管在Gitcode平台上，旨在简化和加速深度学习模型的研发过程。## 技术分析### 灵活的架构设计DeepSea采用模块化的设计，允许用户根据需求选择不同的组件，如优化器、损失函数等，以构建定制

EazyDevelop社区

从零开始搭建个人RAG知识库：RAGFlow+DeepSeek保姆级教程！

EazyDevelop社区

taosync：适用于AList v3的自动化同步工具

在现代生活中，数据同步和备份已成为维护数据安全的关键环节。taosync是一款专为AList v3设计的自动化同步工具，能够帮助用户轻松地同步和备份他们的数据到多个网盘或FTP存储服务。这款工具的开发初衷是为了保存孩子的成长照片，其名称“taoSync”也因此而来。taosync以开源免费的形式提供，支持几乎所有的常用平台，并且提供了完善的日志记录、任务管理以及安全的密码加密功能。## 项目技