JavaWeb/biliob
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 调整弹幕按批次加载，防止过多

Browse Source
This commit is contained in:
zlzw
2024-11-28 17:54:26 +08:00
parent 903ba44bbb
commit 4474da490f
16 changed files with 289 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
Web/html/body/video.html
View File

@@ -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;">
&nbsp; <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&nbsp;Chat&nbsp;列表</p>
<div class="flow-demo" id="flow" style="height: 60vh; overflow: auto;"></div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs2">&nbsp;</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;">
&nbsp; <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&nbsp;Chat&nbsp;列表</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">&nbsp;</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)
});
}