Skip to content

Instantly share code, notes, and snippets.

@netnr netnr/barrage.js
Created Aug 1, 2019

Embed
What would you like to do?
弹幕,斗鱼弹幕临时解决方案
/*
* barrage 弹幕
*
* 2019-06
* netnr
*/
(function (window) {
var bar = function (obj) {
return new bar.fn.init(obj);
}
bar.fn = bar.prototype = {
init: function (obj) {
//覆盖默认配置
for (var k in obj) {
this.config[k] = obj[k];
}
//容器ID兼容
if (typeof this.config.element == "string") {
this.config.element = document.getElementById(this.config.element)
}
this.ready();
return this;
},
//默认配置
config: {
//弹幕容器
element: null,
//弹幕框,自动创建
bbox: null,
//弹幕宽度,默认自动获取
width: null,
//弹幕高度,默认自动获取
height: null,
//弹幕大小
size: "2.5rem",
//一行弹幕高度,像素
rowheight: 50,
//不透明度,0-1
opacity: .7,
//弹幕显示时长,秒
time: 10,
//Z轴高度
zindex: 1
},
//准备
ready: function () {
var bbox = this.config.bbox = document.createElement("div");
bbox.style.position = "absolute";
bbox.style.color = "white";
bbox.style.fontSize = this.config.size;
bbox.style.width = (this.config.width || this.config.element.offsetWidth) + "px";
bbox.style.height = (this.config.height || (this.config.element.offsetHeight - 250)) + "px";
bbox.style.opacity = this.config.opacity;
bbox.style.zIndex = this.config.zindex;
this.config.element.appendChild(bbox);
},
//添加弹幕
add: function (msg, css) {
var bnode = document.createElement('span');
bnode.innerText = msg;
bnode.style.cssText = css;
this.config.bbox.appendChild(bnode);
return bnode;
}
}
bar.fn.init.prototype = bar.fn;
window.barrage = bar;
})(window);
/**
* 斗鱼
* */
barrage.douyu = function () {
var ba = barrage({
//弹幕容器
element: "douyu_room_normal_player_proxy_box"
});
//已发送的消息id
var arrid = [],
//间隔时间获取弹幕,毫秒
gettime = 300,
//弹幕最大行数
bmaxrow = Math.floor(ba.config.bbox.style.height.replace("px", "") / ba.config.rowheight),
//当前行数
crow = 0;
ba.si = setInterval(function () {
//根据行数取最新消息数量,忽略多余的弹幕
var lis = document.getElementById('js-barrage-list').children, len = lis.length, si = Math.max(0, len - bmaxrow);
for (var i = si; i < len; i++) {
var li = lis[i];
//新消息
if (arrid.indexOf(li.id) == -1) {
//清理已发送超出的记录
if (arrid.length > 200) {
arrid.splice(arrid.length - 1, 1);
}
arrid.push(li.id);
ba.arrid = arrid;
//读取弹幕内容
var sps = li.getElementsByTagName('span');
var msg = sps[sps.length - 1].innerText;
//添加弹幕
var bnode = ba.add(msg, "position:absolute;left:" + ba.config.bbox.style.width + ";transition:left " + ba.config.time + "s linear;top:" + (crow * ba.config.rowheight) + "px;white-space:nowrap;");
crow++ >= bmaxrow && (crow = 0);
bnode.style.left = -1 * bnode.offsetWidth + "px";
//记录滚动开始时间
bnode.start = new Date().valueOf();
}
}
//清理滚动结束的弹幕
var clis = ba.config.bbox.children;
for (var i = 0; i < clis.length; i++) {
var li = clis[i];
if (new Date().valueOf() - li.start > ba.config.time * 1000) {
ba.config.bbox.removeChild(li);
}
}
}, gettime)
//弹幕容器自适应
document.body.onresize = function () {
ba.config.element.removeChild(ba.config.bbox);
ba.ready();
};
return ba;
}
var douyu = barrage.douyu();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.