sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改直播结束效果

master
于肖磊 2025-11-28 18:19:51 +08:00
parent e42fae86ce
commit 82af38b7af
4 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
pages/plugins/live/pull/components/video/video.vue
View File

@ -6,7 +6,7 @@
<live-player :src="src" autoplay :muted="true" class="video-size" @statechange="statechange" @error="error" />
<!-- #endif -->
<!-- #ifdef APP -->
<video :src="src" autoplay :is-video="true" :controls="false" muted object-fit="contain" :style="{width: windowWidth + 'px', height: windowHeight + 'px'}" @error="error" @ended="ended"></video>
<video :src="src" autoplay :is-video="true" :controls="false" muted object-fit="contain" :style="{'width': windowWidth + 'px', 'height': windowHeight + 'px', 'background-color': 'transparent'}" @error="error" @ended="ended"></video>
<!-- #endif -->
</template>
@ -48,11 +48,15 @@
this.$emit('ended');
}
// #endif
// #ifdef APP-NVUE
if (!isEmpty(e.type) && e.type == 'error') {
this.$emit('ended');
}
// #endif
console.log(e, 'error');
},
// video app使用这种方式，判断直播是否结束
ended() {
console.log('ended');
this.$emit('ended');
}
},
@ -64,4 +68,7 @@
width: 100vw;
height: 100vh;
}
.video-bg {
background-image: linear-gradient(to bottom,#ba623c,#14766a);
}
</style>

3
pages/plugins/live/pull/mixins/mixins.js
View File

@ -30,6 +30,9 @@ export default {
methods: {
ended() {
this.is_live_ended = true;
},
live_back() {
app.globalData.page_back_prev_event();
}
}
}

32
pages/plugins/live/pull/pull.nvue
View File

@ -1,12 +1,21 @@
<template>
<view :class="theme_view + ' bg-0 flex-row'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-1">
<view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-1 pr">
<view class="live-bg" :style="'z-index:11;width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></view>
<live-video src="http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8" @ended="ended"></live-video>
</view>
<view class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<text style="color:#fff;font-size:16px;">直播已结束</text>
</view>
<template v-if="!is_live_ended">
<live-content @live-back="live_back"></live-content>
</template>
<template v-else>
<view class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view class="flex-col align-c">
<text style="color:#fff;font-size:16px;">直播已结束</text>
<button plain size="mini" class="mt-10 live-ended-button" @click="back"><text class="cr-f pa-5" @tap="live_back">退出直播间</text></button>
</view>
</view>
</template>
</view>
</view>
</template>
@ -30,6 +39,14 @@
}
</script>
<style lang="scss" scoped>
.live-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom,#ba623c,#14766a);
}
.live-content {
position: absolute;
top: 0;
@ -37,9 +54,14 @@
z-index: 9;
width: 100%;
height: 100%;
background: transparent;
}
.live-ended {
// 添加渐变背景色
background-image: linear-gradient(to bottom,#AD18F9,#05DFC7);
}
.live-ended-button {
border-radius: 6px;
border-color: #fff;
}
</style>

14
pages/plugins/live/pull/pull.vue
View File

@ -1,15 +1,18 @@
<template>
<view :class="theme_view + ' bg-0'">
<view :class="theme_view + ' live-bg'">
<view class="w h">
<live-video src="http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8" @ended="ended"></live-video>
</view>
<view class="live-content">
<template v-if="!is_live_ended">
<live-content></live-content>
<live-content @live-back="live_back"></live-content>
</template>
<template v-else>
<view v-if="is_live_ended" class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<text class="live-ended-text">直播已结束</text>
<view class="live-ended flex-row align-c jc-c">
<view class="flex-col align-c">
<text class="live-ended-text">直播已结束</text>
<button plain size="mini" class="mt-10 live-ended-button" @click="back"><text class="cr-f pa-5" @tap="live_back">退出直播间</text></button>
</view>
</view>
</template>
</view>
@ -35,6 +38,9 @@
}
</script>
<style lang="scss" scoped>
.live-bg {
background-image: linear-gradient(to bottom,#ba623c,#14766a);
}
.live-content {
position: absolute;
top: 0;