MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

弹幕

Browse Source
This commit is contained in:
zyronon 2021-09-24 00:03:22 +08:00
parent f905a3521b
commit 7b849f62be
2 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -41,6 +41,8 @@
<script crossorigin="anonymous" <script crossorigin="anonymous"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script> src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script src="./jquery.danmu.min.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>

51
src/pages/home/LivePage.vue
View File

@ -85,6 +85,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="danmu"></div>
</div> </div>
</template> </template>
@ -111,20 +112,44 @@ export default {
}, },
mounted() { mounted() {
nextTick(() => { nextTick(() => {
$("#danmu").danmu({
height: 360, //弹幕区高度
width: 300, //弹幕区宽度
zindex :100, //弹幕区域z-index属性
speed:7000, //滚动弹幕的默认速度，这是数值值得是弹幕滚过每672像素所需要的时间（毫秒）
sumTime:65535, //弹幕流的总时间
danmuLoop:false, //是否循环播放弹幕
defaultFontColor:"#FFFFFF", //弹幕的默认颜色
fontSizeSmall:16, //小弹幕的字号大小
FontSizeBig:24, //大弹幕的字号大小
opacity:"0.9", //默认弹幕透明度
topBottonDanmuTime:6000, // 顶部底部弹幕持续时间（毫秒）
SubtitleProtection:false, //是否字幕保护
positionOptimize:false, //是否位置优化，位置优化是指像AB站那样弹幕主要漂浮于区域上半部分
let page = new Dom('.LivePage') maxCountInScreen: 40, //屏幕上的最大的显示弹幕数目,弹幕数量过多时,优先加载最新的。
console.log(page) maxCountPerSec: 10 //每分秒钟最多的弹幕数目,弹幕数量过多时,优先加载最新的。
});
setInterval(() => { $("#danmu").danmu("addDanmu",[
{ text:"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
let template = `<div class="barrage"> ,{ text:"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
<div class="type">管理</div> ,{ text:"这是底部弹幕" , color:"red" ,size:1,position:2,time:3}
<div class="text">感谢老铁送的火箭</div> ])
</div>` $('#danmu').danmu('danmuStart');
let barrage = new Dom().create(template) //
console.log(barrage) // let page = new Dom('.LivePage')
page.append(barrage) // console.log(page)
}, 1000) //
// setInterval(() => {
//
// let template = `<div class="barrage">
// <div class="type">管理</div>
// <div class="text">感谢老铁送的火箭</div>
// </div>`
// let barrage = new Dom().create(template)
// console.log(barrage)
// page.append(barrage)
// }, 1000)
}) })
}, },
methods: { methods: {