mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 06:31:20 -08:00
617 lines
22 KiB
JavaScript
617 lines
22 KiB
JavaScript
import { bilibiliDanmuParseFromUrl } from './bilibili';
|
|
import workerText from 'bundle-text:./worker';
|
|
|
|
export default class Danmuku {
|
|
constructor(art, option) {
|
|
const { constructor, template } = art;
|
|
|
|
this.utils = constructor.utils; // 工具库
|
|
this.validator = constructor.validator; // 配置校验器
|
|
this.$danmuku = template.$danmuku; // 弹幕层容器
|
|
this.$player = template.$player; // 播放器容器
|
|
|
|
this.art = art;
|
|
this.danmus = []; // 原始弹幕数据
|
|
this.queue = []; // 实际弹幕队列
|
|
this.option = {}; // 格式化后的配置项
|
|
this.$refs = []; // 弹幕DOM节点池
|
|
this.isStop = false; // 是否停止
|
|
this.isHide = false; // 是否隐藏
|
|
this.timer = null; // 定时器
|
|
this.config(option); // 动态配置
|
|
|
|
// 创建 Web Worker, 用于计算弹幕的 top 值
|
|
this.worker = new Worker(URL.createObjectURL(new Blob([workerText])));
|
|
|
|
// 绑定公用事件
|
|
this.start = this.start.bind(this);
|
|
this.stop = this.stop.bind(this);
|
|
this.reset = this.reset.bind(this);
|
|
this.destroy = this.destroy.bind(this);
|
|
|
|
// 监听事件
|
|
art.on('video:play', this.start);
|
|
art.on('video:playing', this.start);
|
|
art.on('video:pause', this.stop);
|
|
art.on('video:waiting', this.stop);
|
|
art.on('destroy', this.destroy);
|
|
art.on('resize', this.reset);
|
|
|
|
// 开始加载弹幕
|
|
this.load();
|
|
}
|
|
|
|
// 默认配置
|
|
static get option() {
|
|
return {
|
|
danmuku: [], // 弹幕数据
|
|
speed: 5, // 弹幕持续时间，范围在[1 ~ 10]
|
|
margin: [10, '25%'], // 弹幕上下边距，支持像素数字和百分比
|
|
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
|
|
color: '#FFFFFF', // 默认弹幕颜色，可以被单独弹幕项覆盖
|
|
mode: 0, // 默认弹幕模式: 0: 滚动，1: 顶部，2: 底部
|
|
modes: [0, 1, 2], // 弹幕可见的模式
|
|
fontSize: 25, // 弹幕字体大小，支持像素数字和百分比
|
|
antiOverlap: true, // 弹幕是否防重叠
|
|
synchronousPlayback: false, // 是否同步播放速度
|
|
mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
|
|
heatmap: false, // 是否开启热力图
|
|
points: [], // 热力图数据
|
|
filter: () => true, // 弹幕载入前的过滤器，只支持返回布尔值
|
|
beforeEmit: () => true, // 弹幕发送前的过滤器，支持返回 Promise
|
|
beforeVisible: () => true, // 弹幕显示前的过滤器，支持返回 Promise
|
|
visible: true, // 弹幕层是否可见
|
|
maxLength: 200, // 弹幕输入框最大长度, 范围在[1 ~ 1000]
|
|
lockTime: 5, // 输入框锁定时间，范围在[1 ~ 60]
|
|
theme: 'dark', // 弹幕主题，支持 dark 和 light，只在自定义挂载时生效
|
|
};
|
|
}
|
|
|
|
// 配置校验
|
|
static get scheme() {
|
|
return {
|
|
danmuku: 'array|function|string',
|
|
speed: 'number',
|
|
margin: 'array',
|
|
opacity: 'number',
|
|
color: 'string',
|
|
mode: 'number',
|
|
modes: 'array',
|
|
fontSize: 'number|string',
|
|
antiOverlap: 'boolean',
|
|
synchronousPlayback: 'boolean',
|
|
mount: '?htmldivelement|string',
|
|
heatmap: 'object|boolean',
|
|
points: 'array',
|
|
filter: 'function',
|
|
beforeEmit: 'function',
|
|
beforeVisible: 'function',
|
|
visible: 'boolean',
|
|
maxLength: 'number',
|
|
lockTime: 'number',
|
|
theme: 'string',
|
|
};
|
|
}
|
|
|
|
// 初始弹幕样式
|
|
static get cssText() {
|
|
return `
|
|
user-select: none;
|
|
position: absolute;
|
|
white-space: pre;
|
|
pointer-events: none;
|
|
perspective: 500px;
|
|
display: inline-block;
|
|
will-change: transform;
|
|
font-weight: normal;
|
|
line-height: 1.125;
|
|
visibility: hidden;
|
|
font-family: SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif;
|
|
text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px;
|
|
`;
|
|
}
|
|
|
|
// 是否在移动端使用了自动旋屏，会影响弹幕的left和top值
|
|
get isRotate() {
|
|
return this.art.plugins?.autoOrientation?.state;
|
|
}
|
|
|
|
// 计算上空白边距
|
|
get marginTop() {
|
|
const { clamp } = this.utils;
|
|
const value = this.option.margin[0];
|
|
const { clientHeight } = this.$player;
|
|
|
|
if (typeof value === 'number') {
|
|
return clamp(value, 0, clientHeight);
|
|
}
|
|
|
|
if (typeof value === 'string' && value.endsWith('%')) {
|
|
const ratio = parseFloat(value) / 100;
|
|
return clamp(clientHeight * ratio, 0, clientHeight);
|
|
}
|
|
|
|
return Danmuku.option.margin[0];
|
|
}
|
|
|
|
// 计算下空白边距
|
|
get marginBottom() {
|
|
const { clamp } = this.utils;
|
|
const value = this.option.margin[1];
|
|
const { clientHeight } = this.$player;
|
|
|
|
if (typeof value === 'number') {
|
|
return clamp(value, 0, clientHeight);
|
|
}
|
|
|
|
if (typeof value === 'string' && value.endsWith('%')) {
|
|
const ratio = parseFloat(value) / 100;
|
|
return clamp(clientHeight * ratio, 0, clientHeight);
|
|
}
|
|
|
|
return Danmuku.option.margin[1];
|
|
}
|
|
|
|
// 计算弹幕字体大小
|
|
get fontSize() {
|
|
const { clamp } = this.utils;
|
|
const { clientHeight } = this.$player;
|
|
|
|
const fontSize = this.option.fontSize;
|
|
|
|
if (typeof fontSize === 'number') {
|
|
return clamp(fontSize, 12, clientHeight);
|
|
}
|
|
|
|
if (typeof fontSize === 'string' && fontSize.endsWith('%')) {
|
|
const ratio = parseFloat(fontSize) / 100;
|
|
return clamp(clientHeight * ratio, 12, clientHeight);
|
|
}
|
|
|
|
return Danmuku.option.fontSize;
|
|
}
|
|
|
|
// 获取弹幕DOM节点
|
|
get $ref() {
|
|
const $ref = this.$refs.pop() || document.createElement('div');
|
|
$ref.style.cssText = Danmuku.cssText;
|
|
$ref.dataset.mode = '';
|
|
return $ref;
|
|
}
|
|
|
|
// 获取准备好发送的弹幕：有的是ready状态（如之前因为弹幕太多而暂停发送的弹幕），有的是wait状态
|
|
get readys() {
|
|
const { currentTime } = this.art;
|
|
return this.queue.filter((danmu) => {
|
|
return (
|
|
danmu.$state === 'ready' ||
|
|
(danmu.$state === 'wait' && currentTime + 0.1 >= danmu.time && danmu.time >= currentTime - 0.1)
|
|
);
|
|
});
|
|
}
|
|
|
|
// 获取正在发送的弹幕，用于计算下一个弹幕的top值
|
|
get emits() {
|
|
const result = [];
|
|
const { clientWidth } = this.$player;
|
|
const clientLeft = this.getLeft(this.$player);
|
|
|
|
this.filter('emit', (danmu) => {
|
|
const top = danmu.$ref.offsetTop;
|
|
const left = this.getLeft(danmu.$ref) - clientLeft;
|
|
const height = danmu.$ref.clientHeight;
|
|
const width = danmu.$ref.clientWidth;
|
|
const distance = left + width;
|
|
const right = clientWidth - distance;
|
|
const speed = distance / danmu.$restTime;
|
|
|
|
const emit = {};
|
|
emit.top = top;
|
|
emit.left = left;
|
|
emit.height = height;
|
|
emit.width = width;
|
|
emit.right = right;
|
|
emit.speed = speed;
|
|
emit.distance = distance;
|
|
emit.time = danmu.$restTime;
|
|
emit.mode = danmu.mode;
|
|
|
|
result.push(emit);
|
|
});
|
|
|
|
return result;
|
|
}
|
|
|
|
// 加载弹幕
|
|
async load() {
|
|
const { errorHandle } = this.utils;
|
|
|
|
try {
|
|
if (typeof this.option.danmuku === 'function') {
|
|
this.danmus = await this.option.danmuku();
|
|
} else if (typeof this.option.danmuku.then === 'function') {
|
|
this.danmus = await this.option.danmuku;
|
|
} else if (typeof this.option.danmuku === 'string') {
|
|
this.danmus = await bilibiliDanmuParseFromUrl(this.option.danmuku);
|
|
} else {
|
|
this.danmus = this.option.danmuku;
|
|
}
|
|
|
|
errorHandle(Array.isArray(this.danmus), 'Danmuku need return an array as result');
|
|
|
|
this.queue = []; // 清空实际弹幕队列
|
|
this.$danmuku.innerText = ''; // 清空弹幕层
|
|
this.danmus.forEach((danmu) => this.emit(danmu)); // 逐个验证原始弹幕并转换为实际弹幕
|
|
this.art.emit('artplayerPluginDanmuku:loaded', this.queue);
|
|
|
|
// TODO: 按时间从小到大排序，用于减少弹幕的遍历次数，待优化...
|
|
// this.queue = this.queue.sort((a, b) => a.time - b.time);
|
|
} catch (error) {
|
|
this.art.emit('artplayerPluginDanmuku:error', error);
|
|
throw error;
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
// 把原始弹幕转换为实际弹幕
|
|
emit(danmu) {
|
|
const { clamp } = this.utils;
|
|
|
|
this.validator(danmu, {
|
|
text: 'string', // 弹幕文本
|
|
mode: '?number', // 弹幕模式: 0: 滚动，1: 顶部，2: 底部
|
|
color: '?string', // 弹幕颜色
|
|
time: '?number', // 弹幕时间
|
|
border: '?boolean', // 弹幕是否有边框
|
|
style: '?object', // 弹幕额外样式
|
|
escape: '?boolean', // 弹幕文本是否转义
|
|
});
|
|
|
|
// 弹幕文本为空则直接忽略
|
|
if (!danmu.text.trim()) return this;
|
|
|
|
// 设置弹幕时间，如果没有则默认为当前时间加 0.5 秒
|
|
if (danmu.time) {
|
|
danmu.time = clamp(danmu.time, 0, Infinity);
|
|
} else {
|
|
danmu.time = this.art.currentTime + 0.5;
|
|
}
|
|
|
|
// 设置弹幕模式，如果没有则默认为全局配置
|
|
if (danmu.mode === undefined) {
|
|
danmu.mode = this.option.mode;
|
|
}
|
|
|
|
// 设置弹幕单独样式，如果没有则默认为空对象
|
|
if (danmu.style === undefined) {
|
|
danmu.style = {};
|
|
}
|
|
|
|
// 设置弹幕弹幕是否转义，如果没有则默认为 true，即不会显示 HTML 标签
|
|
if (danmu.escape === undefined) {
|
|
danmu.escape = true;
|
|
}
|
|
|
|
// 设置弹幕颜色，如果没有则默认为全局配置
|
|
if (danmu.color === undefined) {
|
|
danmu.color = this.option.color;
|
|
}
|
|
|
|
// 弹幕模式只能是 0, 1, 2
|
|
if (![0, 1, 2].includes(danmu.mode)) return this;
|
|
|
|
// 自定义弹幕过滤函数
|
|
if (!this.option.filter(danmu)) return this;
|
|
|
|
// 添加到实际弹幕队列
|
|
this.queue.push({
|
|
...danmu,
|
|
$state: 'wait', // 弹幕状态
|
|
$ref: null, // 弹幕 DOM 节点
|
|
$restTime: 0, // 弹幕剩余时间
|
|
$lastStartTime: 0, // 弹幕上次开始时间
|
|
});
|
|
|
|
// 弹幕有四个状态：
|
|
// - wait: 弹幕还未开始显示，没有被添加到 DOM 中
|
|
// - ready: 弹幕准备好显示，没有被添加到 DOM 中
|
|
// - emit: 弹幕正在显示，已经被添加到 DOM 中
|
|
// - stop: 弹幕正在停止显示，已经被添加到 DOM 中
|
|
|
|
return this;
|
|
}
|
|
|
|
// 动态配置
|
|
config(option) {
|
|
const { clamp } = this.utils;
|
|
const { $controlsCenter } = this.art.template;
|
|
|
|
// 判断配置项是否有变化
|
|
const changed = Object.keys(option).some(
|
|
(key) => JSON.stringify(this.option[key]) !== JSON.stringify(option[key]),
|
|
);
|
|
|
|
if (!changed) return this;
|
|
|
|
this.option = Object.assign({}, Danmuku.option, this.option, option);
|
|
this.validator(this.option, Danmuku.scheme);
|
|
|
|
this.option.mode = clamp(this.option.mode, 0, 2);
|
|
this.option.speed = clamp(this.option.speed, 1, 10);
|
|
this.option.opacity = clamp(this.option.opacity, 0, 1);
|
|
this.option.lockTime = clamp(this.option.lockTime, 1, 60);
|
|
this.option.maxLength = clamp(this.option.maxLength, 1, 1000);
|
|
this.option.mount = this.option.mount || $controlsCenter;
|
|
|
|
// 重新计算弹幕字体大小，需要重新渲染
|
|
if (option.fontSize) {
|
|
this.reset();
|
|
}
|
|
|
|
// 通过配置项控制弹幕的显示和隐藏
|
|
if (this.option.visible) {
|
|
this.show();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
|
|
this.art.emit('artplayerPluginDanmuku:config', this.option);
|
|
|
|
return this;
|
|
}
|
|
|
|
// 计算DOM的left值，受到旋屏影响
|
|
getLeft($ref) {
|
|
const rect = $ref.getBoundingClientRect();
|
|
return this.isRotate ? rect.top : rect.left;
|
|
}
|
|
|
|
// 计算弹幕的top值
|
|
postMessage(message = {}) {
|
|
return new Promise((resolve) => {
|
|
message.id = Date.now();
|
|
this.worker.postMessage(message);
|
|
this.worker.onmessage = (event) => {
|
|
const { data } = event;
|
|
if (data.id === message.id) {
|
|
resolve(data);
|
|
}
|
|
};
|
|
});
|
|
}
|
|
|
|
// 根据状态，获取弹幕队列中的弹幕
|
|
filter(state, callback) {
|
|
return this.queue.filter((danmu) => danmu.$state === state).map(callback);
|
|
}
|
|
|
|
// 重置弹幕到wait状态，回收弹幕DOM节点
|
|
makeWait(danmu) {
|
|
danmu.$state = 'wait';
|
|
if (danmu.$ref) {
|
|
danmu.$ref.style.cssText = Danmuku.cssText;
|
|
this.$refs.push(danmu.$ref);
|
|
danmu.$ref = null;
|
|
}
|
|
}
|
|
|
|
// 实时更新弹幕
|
|
update() {
|
|
const { setStyles } = this.utils;
|
|
|
|
this.timer = window.requestAnimationFrame(async () => {
|
|
if (this.art.playing && !this.isHide) {
|
|
// 实时计算弹幕的剩余显示时间
|
|
this.filter('emit', (danmu) => {
|
|
const emitTime = (Date.now() - danmu.$lastStartTime) / 1000;
|
|
danmu.$restTime -= emitTime;
|
|
danmu.$lastStartTime = Date.now();
|
|
// 超过时间即重置弹幕
|
|
if (danmu.$restTime <= 0) {
|
|
this.makeWait(danmu);
|
|
}
|
|
});
|
|
|
|
// 获取准备好发送的弹幕，可能包含ready和wait状态的弹幕
|
|
const readys = this.readys;
|
|
for (let index = 0; index < readys.length; index++) {
|
|
const danmu = readys[index];
|
|
|
|
// 弹幕发送前的过滤器
|
|
const state = await this.option.beforeVisible(danmu);
|
|
|
|
if (state) {
|
|
const { clientWidth, clientHeight } = this.$player;
|
|
danmu.$ref = this.$ref; // 获取弹幕DOM节点
|
|
|
|
// 设置弹幕文本
|
|
if (danmu.escape) {
|
|
danmu.$ref.innerText = danmu.text;
|
|
} else {
|
|
danmu.$ref.innerHTML = danmu.text;
|
|
}
|
|
|
|
// 提前添加到弹幕层中，用于计算top值
|
|
this.$danmuku.appendChild(danmu.$ref);
|
|
|
|
// 设置初始弹幕样式
|
|
danmu.$ref.style.left = `${clientWidth}px`;
|
|
danmu.$ref.style.opacity = this.option.opacity;
|
|
danmu.$ref.style.fontSize = `${this.fontSize}px`;
|
|
danmu.$ref.style.color = danmu.color;
|
|
danmu.$ref.style.border = danmu.border ? `1px solid ${danmu.color}` : null;
|
|
danmu.$ref.style.backgroundColor = danmu.border ? 'rgb(0 0 0 / 50%)' : null;
|
|
danmu.$ref.style.marginLeft = '0px';
|
|
|
|
// 设置单独弹幕样式
|
|
setStyles(danmu.$ref, danmu.style);
|
|
|
|
// 记录弹幕时间戳
|
|
danmu.$lastStartTime = Date.now();
|
|
|
|
// 计算弹幕剩余时间
|
|
danmu.$restTime =
|
|
this.option.synchronousPlayback && this.art.playbackRate
|
|
? this.option.speed / Number(this.art.playbackRate)
|
|
: this.option.speed;
|
|
|
|
// 计算弹幕的top值
|
|
const { top } = await this.postMessage({
|
|
target: {
|
|
mode: danmu.mode,
|
|
height: danmu.$ref.clientHeight,
|
|
speed: (clientWidth + danmu.$ref.clientWidth) / danmu.$restTime,
|
|
}, // 当前弹幕信息
|
|
emits: this.emits, // 正在发送的其它弹幕
|
|
antiOverlap: this.option.antiOverlap,
|
|
clientWidth: clientWidth,
|
|
clientHeight: clientHeight,
|
|
marginBottom: this.marginBottom,
|
|
marginTop: this.marginTop,
|
|
});
|
|
|
|
if (danmu.$ref) {
|
|
if (!this.isStop && top !== undefined) {
|
|
danmu.$state = 'emit'; // 转换为emit状态
|
|
danmu.$ref.style.visibility = 'visible';
|
|
danmu.$ref.dataset.mode = danmu.mode; // CSS控制模式的显示和隐藏
|
|
this.art.emit('artplayerPluginDanmuku:visible', danmu);
|
|
|
|
switch (danmu.mode) {
|
|
// 滚动的弹幕
|
|
case 0: {
|
|
danmu.$ref.style.top = `${top}px`;
|
|
const translateX = clientWidth + danmu.$ref.clientWidth;
|
|
danmu.$ref.style.transform = `translateX(${-translateX}px)`;
|
|
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
|
|
break;
|
|
}
|
|
case 1:
|
|
// falls through
|
|
case 2:
|
|
danmu.$ref.style.left = '50%';
|
|
danmu.$ref.style.top = `${top}px`;
|
|
danmu.$ref.style.marginLeft = `-${danmu.$ref.clientWidth / 2}px`;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
} else {
|
|
// 假如弹幕已经停止或者没有 top 值，则重置弹幕为ready状态，回收弹幕DOM节点，等待下次发送
|
|
danmu.$state = 'ready';
|
|
this.$refs.push(danmu.$ref);
|
|
danmu.$ref = null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 递归调用
|
|
if (!this.isStop) {
|
|
this.update();
|
|
}
|
|
});
|
|
return this;
|
|
}
|
|
|
|
// 继续弹幕
|
|
continue() {
|
|
const { clientWidth } = this.$player;
|
|
this.filter('stop', (danmu) => {
|
|
danmu.$state = 'emit'; // 转换为emit状态
|
|
danmu.$lastStartTime = Date.now();
|
|
switch (danmu.mode) {
|
|
// 继续滚动的弹幕
|
|
case 0: {
|
|
const translateX = clientWidth + danmu.$ref.clientWidth;
|
|
danmu.$ref.style.transform = `translateX(${-translateX}px)`;
|
|
danmu.$ref.style.transition = `transform ${danmu.$restTime}s linear 0s`;
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
|
|
return this;
|
|
}
|
|
|
|
// 暂停弹幕
|
|
suspend() {
|
|
const { clientWidth } = this.$player;
|
|
this.filter('emit', (danmu) => {
|
|
danmu.$state = 'stop'; // 转换为stop状态
|
|
switch (danmu.mode) {
|
|
// 停止滚动的弹幕
|
|
case 0: {
|
|
const translateX = clientWidth - (this.getLeft(danmu.$ref) - this.getLeft(this.$player));
|
|
danmu.$ref.style.transform = `translateX(${-translateX}px)`;
|
|
danmu.$ref.style.transition = 'transform 0s linear 0s';
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
|
|
return this;
|
|
}
|
|
|
|
stop() {
|
|
this.isStop = true;
|
|
this.suspend();
|
|
window.cancelAnimationFrame(this.timer);
|
|
this.art.emit('artplayerPluginDanmuku:stop');
|
|
return this;
|
|
}
|
|
|
|
start() {
|
|
this.isStop = false;
|
|
this.continue();
|
|
this.update();
|
|
this.art.emit('artplayerPluginDanmuku:start');
|
|
return this;
|
|
}
|
|
|
|
reset() {
|
|
this.queue.forEach((danmu) => this.makeWait(danmu));
|
|
this.art.emit('artplayerPluginDanmuku:reset');
|
|
return this;
|
|
}
|
|
|
|
show() {
|
|
if (!this.isHide) return this;
|
|
this.isHide = false;
|
|
this.start();
|
|
this.$danmuku.style.display = '';
|
|
this.option.visible = true;
|
|
this.art.emit('artplayerPluginDanmuku:show');
|
|
return this;
|
|
}
|
|
|
|
hide() {
|
|
if (this.isHide) return this;
|
|
this.isHide = true;
|
|
this.stop();
|
|
this.queue.forEach((item) => this.makeWait(item));
|
|
this.$danmuku.style.display = 'none';
|
|
this.option.visible = false;
|
|
this.art.emit('artplayerPluginDanmuku:hide');
|
|
return this;
|
|
}
|
|
|
|
destroy() {
|
|
this.stop();
|
|
this.worker.terminate();
|
|
this.art.off('video:play', this.start);
|
|
this.art.off('video:playing', this.start);
|
|
this.art.off('video:pause', this.stop);
|
|
this.art.off('video:waiting', this.stop);
|
|
this.art.off('resize', this.reset);
|
|
this.art.off('destroy', this.destroy);
|
|
this.art.emit('artplayerPluginDanmuku:destroy');
|
|
}
|
|
}
|