update 调整弹幕按批次加载，防止过多
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
@@ -11,15 +12,56 @@
|
||||
<div id="header"></div>
|
||||
不想做了,鸽
|
||||
</body>
|
||||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/jquery-3.2.1.js"></script>
|
||||
<script src="/js/CommonConfig.js"></script>
|
||||
<script src="/js/httpUtils.js"></script>
|
||||
<script src="/layui/layui.js"></script>
|
||||
<script src="/js/lodash.min.js"></script>
|
||||
<script src="/js/Chart.min.js"></script>
|
||||
|
||||
<script>
|
||||
headerModel=3;
|
||||
headerModel = 3;
|
||||
var roomId = getParam('roomId');
|
||||
$('#header').load("/html/header.html");
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function init() {
|
||||
if (!hasString(getParam('roomId'))) {
|
||||
showAnchor();
|
||||
return
|
||||
}
|
||||
initTabs()
|
||||
initBarrageRenderer();
|
||||
}
|
||||
function showAnchor() {
|
||||
|
||||
layer.open({
|
||||
type: 2, // page 层类型
|
||||
area: ['320px', '400px'],
|
||||
title: '选择主播',
|
||||
shade: 0.6, // 遮罩透明度
|
||||
shadeClose: false, // 点击遮罩区域，关闭弹层
|
||||
maxmin: true, // 允许全屏最小化
|
||||
anim: 1, // 0-6 的动画形式，-1 不开启
|
||||
btn: ['确定', '取消'],
|
||||
content: '/html/ui/selectAnchor.html',
|
||||
yes: function (index, layero) {
|
||||
var iframeWin = window[layero.find('iframe')[0]['name']];
|
||||
var anchorRoomId = iframeWin.$('#anchorRoomId')[0].value;
|
||||
if (!hasString(anchorRoomId)) {
|
||||
layer.msg("请选择")
|
||||
return
|
||||
}
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.set('roomId', anchorRoomId);
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
});
|
||||
}
|
||||
init();
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
</html>
|
||||
@@ -91,10 +91,10 @@
|
||||
{ field: 'recordPath', title: '保存路径', width: 120 },
|
||||
{ field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
|
||||
{ field: 'recordLive', title: '录制视频', width: 120, sort: true },
|
||||
{ field: 'syncDanmuForLive', title: '同步录制', width: 120, sort: true },
|
||||
{ field: 'recordDanmuDate', title: '弹幕录制预定时间', width: 100, sort: true },
|
||||
{ field: 'recordLiveDate', title: '视频录制预定时间', width: 100, sort: true },
|
||||
{ field: 'recordUid', title: '录制账号', width: 120, sort: true, templet: '<div><a href="https://space.bilibili.com/{{= d.recordUid}}" target="_blank">{{= d.recordUid}}</a>' },
|
||||
{ field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
|
||||
{ field: 'sql_time', title: '添加时间', width: 100 },
|
||||
{ fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#toolDemo" }
|
||||
]],
|
||||
|
||||
@@ -6,11 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>视频中心</title>
|
||||
<link rel="stylesheet" href="/layui/css/layui.css">
|
||||
<style>
|
||||
canvas {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body class="layui-bg-gray">
|
||||
@@ -27,36 +23,44 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs7">
|
||||
<div class="grid-demo" id="container" style="margin-top: 16px; width: 100%;">
|
||||
<video id="videoElement" controls style="width: 100%;"></video>
|
||||
<div class="layui-row">
|
||||
<div class="grid-demo" id="container" style="margin-top: 16px; width: 100%;">
|
||||
<video id="videoElement" controls style="width: 100%;"></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-form layui-col-xs1">
|
||||
<input type="checkbox" id="danmuCheckBox" title="弹幕" lay-skin="tag" lay-filter="danmuCheckBox" on
|
||||
checked>
|
||||
</div>
|
||||
<div class="layui-col-xs9" style="text-align: center;">
|
||||
<div id="slider" lay-options="{value: 100,input:true}"></div>
|
||||
<span>弹幕透明度</span>
|
||||
</div>
|
||||
<div class="layui-col-xs2" style="text-align: right; align-self: center;">
|
||||
弹幕装载数:<span id="danmuSize">你猜</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs2" style="margin-left: 16px; width: 22%; margin-top: 16px;">
|
||||
<p style="font-size: 4;font-weight: bold; text-align: center;">Super Chat 列表</p>
|
||||
<div class="flow-demo" id="flow" style="height: 60vh; overflow: auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs2"> </div>
|
||||
<div class="layui-form layui-col-xs1">
|
||||
<input type="checkbox" id="danmuCheckBox" title="弹幕" lay-skin="tag" lay-filter="danmuCheckBox" on checked>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs4" style="text-align: center;">
|
||||
<div id="slider" lay-options="{value: 100,input:true}"></div>
|
||||
<span>弹幕透明度</span>
|
||||
</div>
|
||||
<div class="layui-col-xs2" style="text-align: right; align-self: center;">
|
||||
弹幕装载数:<span id="danmuSize">你猜</span>
|
||||
<div class="layui-col-xs2" style="margin-left: 16px; width: 22%; margin-top: 16px;">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<canvas id="giftChart" style="width: 100%; max-height: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<p style="font-size: 4;font-weight: bold; text-align: center;">Super Chat 列表</p>
|
||||
<div class="flow-demo" id="flow" style="max-height: 60vh; overflow: auto;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs2"> </div>
|
||||
<div class="layui-col-xs7" style="width: auto; height: 50%;">
|
||||
<canvas id="giftChart" style="width: 100%; height: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 10vh;"></div>
|
||||
|
||||
|
||||
<!-- <div style="margin-bottom: 10vh;"></div> -->
|
||||
</body>
|
||||
<script id="menulist" type="text/html">
|
||||
<ul class="layui-tab-title">
|
||||
@@ -252,7 +256,7 @@
|
||||
lables.push(item.gift_name + "\n" + item.total_price / 100 + "¥")
|
||||
values.push(item.total_gift_num)
|
||||
});
|
||||
if(chartView!==null){
|
||||
if (chartView !== null) {
|
||||
chartView.destroy()
|
||||
}
|
||||
chartView = new Chart($('#giftChart').get(0), {
|
||||
@@ -332,13 +336,23 @@
|
||||
}
|
||||
function initDanmu() {
|
||||
barrageRenderer.setBarrages([])
|
||||
getDanmu(getParam('roomId'), videoId)
|
||||
loadDanmu(0)
|
||||
}
|
||||
function loadDanmu(page) {
|
||||
getDanmu(getParam('roomId'), videoId, page)
|
||||
.then(data => {
|
||||
barrageRenderer.setBarrages(data.data.danmu);
|
||||
$('#danmuSize').get(0).innerHTML = data.data.danmu.length
|
||||
initSC(data.data.superChat)
|
||||
if (page === 0) {
|
||||
initSC(data.data.superChat)
|
||||
$('#danmuSize').get(0).innerHTML = data.data.danmuCount;
|
||||
barrageRenderer.setBarrages(data.data.danmu)
|
||||
}else{
|
||||
barrageRenderer.barrageLayoutCalculate.allBarrageInstances.push(...data.data.danmu);
|
||||
}
|
||||
if(data.data.nextDanmu){
|
||||
loadDanmu(page+1)
|
||||
}
|
||||
// barrageRenderer.setBarrages(data.data.danmu);
|
||||
})
|
||||
|
||||
}
|
||||
function initSC(scList) {
|
||||
flow.load({
|
||||
@@ -347,10 +361,7 @@
|
||||
isAuto: true,
|
||||
isLazyimg: false,
|
||||
done: function (page, next) { // 加载下一页
|
||||
// 模拟插入
|
||||
console.log(scList)
|
||||
laytpl($('#superChatCard').get(0).innerHTML).render(scList, function (html) {
|
||||
console.log(html)
|
||||
next(html, false)
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user