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

修改页面显示的播放逻辑处理

master
于肖磊 2025-12-01 14:25:30 +08:00
parent d6ab964712
commit 17f17e2416
8 changed files with 159 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/css/lib.css
View File

@ -1341,6 +1341,10 @@
padding: 10rpx;
}
.pt-3 {
padding-top: 6rpx;
}
/**
* 颜色类样式
*/

47
pages/plugins/live/pull/components/h5-hls-video/h5-hls-video.vue
View File

@ -143,7 +143,8 @@
num: '',
videoEl: null,
hlsPlayer: null,
renderProps: {}
renderProps: {},
autoplayRejected: false // 标记自动播放是否被拒绝
}
},
computed: {
@ -210,6 +211,36 @@
})
})
}
// 如果设置了自动播放，尝试播放视频
if (autoplay) {
this.attemptAutoPlay(videoEl, muted);
}
},
// 尝试自动播放视频
attemptAutoPlay(videoElement, isMuted) {
const playPromise = videoElement.play();
if (playPromise !== undefined) {
playPromise.then(() => {
// 自动播放成功
this.autoplayRejected = false;
// 通知父组件静音播放成功
this.$ownerInstance.callMethod('eventEmit', {
event: 'autoPlaySuccess',
data: this.renderProps.muted,
});
})
.catch((error) => {
// 自动播放被拒绝
this.autoplayRejected = true;
// 通知父组件静音播放成功
this.$ownerInstance.callMethod('eventEmit', {
event: 'autoPlayError',
data: this.renderProps.muted,
});
});
}
},
// 播放视频流
initHlsPlayer(src) {
@ -222,9 +253,14 @@
this.$ownerInstance.callMethod('eventEmit', {
event: 'hlsManifestParsed'
})
// HLS流加载完成后尝试自动播放
if (this.renderProps.autoplay) {
this.attemptAutoPlay(this.videoEl, this.renderProps.muted);
}
})
this.hlsPlayer.on(hlsjs.Events.ERROR, (event, data) => {
console.error('HLS Error:', data)
console.error('HLS Error:', data, event, '444')
// 如果HLS播放失败，尝试直接播放源地址作为降级方案
if (this.videoEl && data.fatal) {
this.videoEl.src = src
@ -383,6 +419,8 @@
this.videoEl.load()
this.videoEl = null
}
// 重置自动播放标记
this.autoplayRejected = false;
},
triggerCommand(eventType) {
if (eventType) {
@ -438,6 +476,11 @@
this.videoEl.controls = controls
this.videoEl.muted = muted
this.videoEl.playbackRate = playbackRate
// 如果更改了静音状态且之前自动播放被拒绝，重新尝试播放
if (this.autoplayRejected && autoplay) {
this.attemptAutoPlay(this.videoEl, muted);
}
}
},
randomNumChange(val) {

9
pages/plugins/live/pull/components/live-content/live-content.vue
View File

@ -46,7 +46,7 @@
<template v-if="item.type == 'user'">
<!-- 用户名和文本内容容器 -->
<view class="inline-block">
<view class="fl flex-row align-c jc-c pt-3">
<view class="fl flex-row align-c jc-c padding-top-xs">
<!-- 头像 -->
<image :src="item.user_avatar != null ? item.user_avatar : userAvatar" class="bulletin-item-avatar" mode="aspectFill"></image>
</view>
@ -64,7 +64,7 @@
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="flex-1 bulletin-item pt-6">
<view class="flex-1 bulletin-item padding-top-sm">
<template v-if="item.type == 'user'">
<!-- 头像 -->
<view class="flex-1 flex-row align-c flex-wrap">
@ -657,9 +657,9 @@
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 6rpx 10rpx;
padding: 6rpx 20rpx;
background-color: rgba(40,40,40,0.45);
border-radius: 10rpx;
border-radius: 30rpx;
}
.bulletin-item-avatar {
@ -679,7 +679,6 @@
.user-name {
font-size: 28rpx;
margin-right: 10rpx;
line-height: 30rpx;
display: inline;
}

1
pages/plugins/live/pull/components/share-popup/share-popup.vue
View File

@ -102,7 +102,6 @@
created: function () {
const data = uni.getWindowInfo();
console.log(data);
const del_width = app.globalData.rpx_to_px(100);
this.single_text_width = (data.windowWidth - del_width) + 'px;';
},

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

@ -1,12 +1,12 @@
<template>
<!-- #ifdef H5 -->
<h5-hls-video :src="src" autoplay class="video-size" :muted="true" @hlsError="error" @ended="ended"></h5-hls-video>
<h5-hls-video :src="src" autoplay :muted="muted" class="video-size" @hlsError="error" @ended="ended" @autoPlaySuccess="auto_play_success" @autoPlayError="auto_play_error"></h5-hls-video>
<!-- #endif -->
<!-- #ifdef MP -->
<live-player :src="src" autoplay :muted="true" class="video-size" @statechange="statechange" @error="error" />
<live-player :src="src" autoplay :muted="muted" 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', 'background-color': 'transparent'}" @error="error" @ended="ended"></video>
<video :src="src" autoplay :is-video="true" :controls="false" :muted="muted" object-fit="contain" :style="{'width': windowWidth + 'px', 'height': windowHeight + 'px', 'background-color': 'transparent'}" @error="error" @ended="ended"></video>
<!-- #endif -->
</template>
@ -26,16 +26,14 @@
data() {
return {
windowWidth: 0,
windowHeight: 0
windowHeight: 0,
muted: false,
}
},
created() {
const data = uni.getWindowInfo();
this.windowWidth = data.windowWidth;
this.windowHeight = data.windowHeight;
},
mounted() {
},
methods: {
statechange(e) {
@ -58,6 +56,24 @@
// video app使用这种方式，判断直播是否结束
ended() {
this.$emit('ended');
},
// 静音自动播放成功, 触发事件, 添加提示弹出框，用户操作之后改为非静音播放
auto_play_success(e) {
// 静音播放成功时，触发事件，提示用户需要修改点击修改播放状态
if (e) {
this.$emit('mutedAutoPlaySuccess');
}
},
// 自动播放失败, 静音播放
auto_play_error(e) {
// 播放失败，并且是非静音状态，则静音播放尝试是否成功
if (!e) {
this.muted = true;
}
},
// 静音提示点击
muted_tap() {
this.muted = false;
}
},
}

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

@ -7,6 +7,7 @@ export default {
windowHeight: 0,
is_live_ended: false,
live_config: {},
is_loading: true,
}
},
onLoad(params) {
@ -28,14 +29,12 @@ export default {
this.windowWidth = data.windowWidth;
this.windowHeight = data.windowHeight;
// #endif
this.init();
},
mounted() {
this.init();
},
methods: {
ended() {
this.is_live_ended = true;
},
live_back() {
app.globalData.page_back_prev_event();
},
init() {
uni.showLoading({
title: '加载中...',
@ -46,22 +45,40 @@ export default {
method: 'POST',
data: {},
dataType: 'json',
success: (res) => {
is_loading.value = false;
uni.hideLoading();
success: (res) => {
const new_data = res.data;
// 获取直播间信息
this.live_config = new_data.data || {};
// 如果不存在拉流地址则认为直播已结束，避免因为报错导致的页面异常
if (isEmpty(new_data.data.pull_flv_url)) {
this.is_live_ended = true;
// 显示直播内容
this.is_loading = false;
// 隐藏加载提示
uni.hideLoading();
// 判断是否有数据
if(res.data.code == 0) {
// 获取直播间信息
this.live_config = new_data.data || {};
// 如果不存在拉流地址则认为直播已结束，避免因为报错导致的页面异常
if (isEmpty(new_data.data.pull_flv_url)) {
this.is_live_ended = true;
}
} else {
uni.showToast({
title: new_data.msg || '获取直播间信息失败',
icon: 'none'
});
}
},
fail: (err) => {
is_loading.value = false;
// 显示直播内容
this.is_loading = false;
// 隐藏加载提示
uni.hideLoading();
}
});
},
ended() {
this.is_live_ended = true;
},
live_back() {
app.globalData.page_back_prev_event();
}
}
}

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

@ -1,10 +1,9 @@
<template>
<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:1;width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></view>
<live-video :src="live_config?.pull_flv_url || ''" @ended="ended"></live-video>
<live-video ref="live-video" :src="live_config.pull_flv_url || ''" @ended="ended"></live-video>
</view>
<view class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
<template v-if="!is_live_ended">
<live-content :live-config="live_config" @live-back="live_back"></live-content>
</template>

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

@ -1,21 +1,30 @@
<template>
<view :class="theme_view + ' live-bg'">
<view class="w h">
<live-video :src="live_config?.pull_flv_url || ''" @ended="ended"></live-video>
<live-video ref="liveVideo" :src="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended" @mutedAutoPlaySuccess="muted_auto_play_success"></live-video>
</view>
<view class="live-content">
<view v-if="!is_loading" class="live-content">
<template v-if="!is_live_ended">
{{ !is_live_ended && is_muted_auto_play_success }}
<live-content :live-config="live_config" @live-back="live_back"></live-content>
</template>
<template v-else>
<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>
<button plain size="mini" class="mt-10 live-ended-button" @tap="live_back">
<text class="cr-f pa-5">退出直播间</text>
</button>
</view>
</view>
</template>
</view>
<!-- 静音提示 -->
<view v-if="is_muted_auto_play_success" class="live-muted flex-row align-c jc-c">
<view class="live-muted-tips">
因浏览器限制静音，<text class="ml-5 cr-f live-muted-text" @tap="muted_tap">请点击打开声音</text>
</view>
</view>
</view>
</template>
<script>
@ -33,6 +42,18 @@
data() {
return {
theme_view: app.globalData.get_theme_value_view(),
is_muted_auto_play_success: false,
}
},
methods: {
muted_auto_play_success() {
this.is_muted_auto_play_success = true;
},
// 静音提示点击
muted_tap() {
this.$refs.liveVideo.muted_tap();
// 关闭静音提示
this.is_muted_auto_play_success = false;
}
},
}
@ -49,6 +70,31 @@
width: 100%;
height: 100%;
}
.live-muted {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 100%;
height: 100%;
.live-muted-tips {
background: rgba(0, 0, 0, 0.5);
border-radius: 20rpx;
padding: 15rpx 20rpx;
font-size: 32rpx;
color: #fff;
}
.live-muted-text {
color: rgba(210,27,70,1);
padding-bottom: 4rpx;
font-size:16px;
}
.live-muted-text:hover {
color: rgba(210,27,70,1);
border-bottom: 1px solid rgba(210,27,70,1);
}
}
.live-ended {
width: 100vw;
height: 100vh;