直播
This commit is contained in:
zyronon
parent
7b849f62be
commit
e147895d32
@ -41,8 +41,6 @@
|
|||||||
<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>
|
||||||
|
|||||||
1
public/jquery.danmu.min.js
vendored
Normal file
1
public/jquery.danmu.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/img/icon/home/followed.webp
Normal file
BIN
src/assets/img/icon/home/followed.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/img/icon/home/gift.webp
Normal file
BIN
src/assets/img/icon/home/gift.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/img/icon/home/hcm.webp
Normal file
BIN
src/assets/img/icon/home/hcm.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/img/icon/home/hy4.webp
Normal file
BIN
src/assets/img/icon/home/hy4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/img/icon/home/love.webp
Normal file
BIN
src/assets/img/icon/home/love.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/img/icon/home/more.png
Normal file
BIN
src/assets/img/icon/home/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/img/icon/home/voice.png
Normal file
BIN
src/assets/img/icon/home/voice.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="LivePage">
|
<div class="LivePage" ref="page">
|
||||||
<div class="live-wrapper">
|
<div class="live-wrapper">
|
||||||
<img src="../../assets/img/poster/11.jpg" alt="">
|
<img src="../../assets/img/poster/11.jpg" alt="">
|
||||||
</div>
|
</div>
|
||||||
@ -85,8 +85,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="danmu"></div>
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <base-button @click="sendGift">点击</base-button>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -97,64 +98,123 @@ import {nextTick} from "vue";
|
|||||||
export default {
|
export default {
|
||||||
name: "LivePage",
|
name: "LivePage",
|
||||||
components: {BaseButton},
|
components: {BaseButton},
|
||||||
props: {
|
props: {},
|
||||||
modelValue: false
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFollowed: false,
|
isFollowed: false,
|
||||||
list: [],
|
list: [
|
||||||
barrage: []
|
'asdfasdf',
|
||||||
|
'asdfasdf',
|
||||||
|
'asdfasdf',
|
||||||
|
],
|
||||||
|
barrage: [],
|
||||||
|
barrageTemplate: () => {
|
||||||
|
return `
|
||||||
|
<div class="barrage">
|
||||||
|
<div class="type">管理</div>
|
||||||
|
<div class="text">感谢老铁送的火箭</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
userJoinedTemplate: () => {
|
||||||
|
let src = require('../../assets/img/icon/home/level.webp')
|
||||||
|
return `
|
||||||
|
<div class="user-joined">
|
||||||
|
<div class="level">
|
||||||
|
<div class="wrapper">
|
||||||
|
<img src="${src}" alt="">
|
||||||
|
<span>30</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="name">嘻嘻哈哈</span>
|
||||||
|
<span class="text">加入了直播间</span>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
sendGiftTemplate: () => {
|
||||||
|
let avatar = require('../../assets/img/icon/avatar/3.png')
|
||||||
|
let gift = require('../../assets/img/icon/home/love.webp')
|
||||||
|
return `
|
||||||
|
<div class="send-gift">
|
||||||
|
<div class="left">
|
||||||
|
<img src="${avatar}" alt="" class="avatar">
|
||||||
|
<div class="desc">
|
||||||
|
<div class="name">哈哈哈哈哈哈哈哈哈</div>
|
||||||
|
<div class="sendto">
|
||||||
|
<span class="send">送</span>
|
||||||
|
<span class="to">嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gift-wrapper">
|
||||||
|
<img src="${gift}" alt="" class="gift-icon">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
x339
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
page: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
nextTick(() => {
|
this.page = this.$refs.page
|
||||||
$("#danmu").danmu({
|
setInterval(async () => {
|
||||||
height: 360, //弹幕区高度
|
this.sendGift()
|
||||||
width: 300, //弹幕区宽度
|
await this.$sleep(300)
|
||||||
zindex :100, //弹幕区域z-index属性
|
this.sendGift()
|
||||||
speed:7000, //滚动弹幕的默认速度，这是数值值得是弹幕滚过每672像素所需要的时间（毫秒）
|
this.joinUser()
|
||||||
sumTime:65535, //弹幕流的总时间
|
}, 3000)
|
||||||
danmuLoop:false, //是否循环播放弹幕
|
setInterval(async () => {
|
||||||
defaultFontColor:"#FFFFFF", //弹幕的默认颜色
|
this.sendBarrage()
|
||||||
fontSizeSmall:16, //小弹幕的字号大小
|
}, 5100)
|
||||||
FontSizeBig:24, //大弹幕的字号大小
|
// setInterval(async () => {
|
||||||
opacity:"0.9", //默认弹幕透明度
|
// this.sendComment()
|
||||||
topBottonDanmuTime:6000, // 顶部底部弹幕持续时间（毫秒）
|
// }, 500)
|
||||||
SubtitleProtection:false, //是否字幕保护
|
|
||||||
positionOptimize:false, //是否位置优化，位置优化是指像AB站那样弹幕主要漂浮于区域上半部分
|
|
||||||
|
|
||||||
maxCountInScreen: 40, //屏幕上的最大的显示弹幕数目,弹幕数量过多时,优先加载最新的。
|
|
||||||
maxCountPerSec: 10 //每分秒钟最多的弹幕数目,弹幕数量过多时,优先加载最新的。
|
|
||||||
});
|
|
||||||
$("#danmu").danmu("addDanmu",[
|
|
||||||
{ text:"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
|
|
||||||
,{ text:"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
|
|
||||||
,{ text:"这是底部弹幕" , color:"red" ,size:1,position:2,time:3}
|
|
||||||
])
|
|
||||||
$('#danmu').danmu('danmuStart');
|
|
||||||
//
|
|
||||||
// let page = new Dom('.LivePage')
|
|
||||||
// console.log(page)
|
|
||||||
//
|
|
||||||
// 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: {
|
||||||
t() {
|
sendGift() {
|
||||||
this.list.push('asdfasdfasdfasdfffasdfasdfffasdfasdfffasdfasdfffff')
|
let page = new Dom(this.page)
|
||||||
|
let sendGift = new Dom().create(this.sendGiftTemplate())
|
||||||
|
sendGift.on('animationend', () => {
|
||||||
|
sendGift.remove()
|
||||||
|
})
|
||||||
|
let oldSendGift = new Dom('.send-gift')
|
||||||
|
let top = document.body.clientHeight * .6
|
||||||
|
if (oldSendGift.els.length !== 0) {
|
||||||
|
top = sendGift.removePx(oldSendGift.css('top')) - 70
|
||||||
|
}
|
||||||
|
sendGift.css('top', top)
|
||||||
|
page.append(sendGift)
|
||||||
|
},
|
||||||
|
joinUser() {
|
||||||
|
let page = new Dom(this.page)
|
||||||
|
let user = new Dom().create(this.userJoinedTemplate())
|
||||||
|
user.on('animationend', () => {
|
||||||
|
user.remove()
|
||||||
|
})
|
||||||
|
page.append(user)
|
||||||
|
},
|
||||||
|
sendBarrage() {
|
||||||
|
let page = new Dom(this.page)
|
||||||
|
let barrage = new Dom().create(this.barrageTemplate())
|
||||||
|
barrage.on('animationend', () => {
|
||||||
|
barrage.remove()
|
||||||
|
})
|
||||||
|
let oldBarrages = new Dom('.barrage')
|
||||||
|
let top = document.body.clientHeight * .35
|
||||||
|
if (oldBarrages.els.length !== 0) {
|
||||||
|
top = barrage.removePx(oldBarrages.css('top')) + 20
|
||||||
|
}
|
||||||
|
barrage.css('top', top)
|
||||||
|
page.append(barrage)
|
||||||
|
},
|
||||||
|
sendComment() {
|
||||||
|
this.list.push('评论评论评论评论评论评论评论评论评论评论' + this.list.length)
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
let comments = this.$refs['comments']
|
let comments = this.$refs['comments']
|
||||||
comments.scrollTop = comments.scrollHeight - comments.clientHeight
|
comments.scrollTop = comments.scrollHeight - comments.clientHeight
|
||||||
@ -172,6 +232,84 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
@import "../../assets/scss/index";
|
||||||
|
|
||||||
|
.send-gift {
|
||||||
|
position: fixed;
|
||||||
|
top: 63vh;
|
||||||
|
left: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
animation: send-gift-anim 2s linear;
|
||||||
|
|
||||||
|
@keyframes send-gift-anim {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
background: linear-gradient(to right, @primary-btn-color, rgba(252, 47, 86, .2));
|
||||||
|
padding: .5rem;
|
||||||
|
border-radius: 5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin-right: .5rem;
|
||||||
|
width: 4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
width: 20vw;
|
||||||
|
|
||||||
|
.name, .sendto {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sendto {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.to {
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gift-icon {
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
font-size: 2.3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: oblique;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.barrage {
|
.barrage {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -188,7 +326,6 @@ export default {
|
|||||||
to {
|
to {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.type {
|
.type {
|
||||||
@ -200,6 +337,70 @@ export default {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-joined {
|
||||||
|
@tag-bg: rgba(58, 58, 70, 0.3);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 70vh;
|
||||||
|
left: 1.5rem;
|
||||||
|
padding: .4rem .8rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
background: rgba(115, 114, 181, .7);
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
animation: user-joined-anim 3s linear;
|
||||||
|
|
||||||
|
@keyframes user-joined-anim {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(3rem);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@text-color: rgb(164, 234, 253);
|
||||||
|
|
||||||
|
.level {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
@color: rgb(130, 133, 185);
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
padding: 0 .6rem;
|
||||||
|
background: @color;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
width: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: @text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
@import "../../assets/scss/index";
|
@import "../../assets/scss/index";
|
||||||
|
|||||||
@ -31,7 +31,7 @@ export default class Dom {
|
|||||||
|
|
||||||
create(template) {
|
create(template) {
|
||||||
let tempNode = document.createElement('div');
|
let tempNode = document.createElement('div');
|
||||||
tempNode.innerHTML = template;
|
tempNode.innerHTML = template.trim();
|
||||||
this.els = [tempNode.firstChild]
|
this.els = [tempNode.firstChild]
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
@ -62,7 +62,7 @@ export default class Dom {
|
|||||||
if (args.length === 1) {
|
if (args.length === 1) {
|
||||||
//情况一：获取样式
|
//情况一：获取样式
|
||||||
if (typeof args[0] === 'string') {
|
if (typeof args[0] === 'string') {
|
||||||
return window.getComputedStyle(this.els[0], null)[args[0]]
|
return window.getComputedStyle(this.els[this.els.length - 1], null)[args[0]]
|
||||||
// return globalMethods.$getCss2
|
// return globalMethods.$getCss2
|
||||||
// return this.els[0].style[args[0]]
|
// return this.els[0].style[args[0]]
|
||||||
} else {
|
} else {
|
||||||
@ -122,8 +122,11 @@ export default class Dom {
|
|||||||
if (typeof value === 'number') {
|
if (typeof value === 'number') {
|
||||||
return value + 'px'
|
return value + 'px'
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
return value
|
|
||||||
}
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
removePx(val) {
|
||||||
|
return parseInt(val)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user