2***@qq.com
2***@qq.com
  • 发布:2025-08-25 10:32
  • 更新:2025-08-25 10:32
  • 阅读:21

【报Bug】播放视频完成会显示一个重新加载的图标,没法隐藏,点击还不是重新播放只是向后退了一秒

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10

HBuilderX类型: 正式

HBuilderX版本号: 4.76

手机系统: Android

手机系统版本号: Android 16

手机厂商: vivo

手机机型: iq00 neo10

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<route lang="json5" type="add">
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '听音练习',
animationType: 'slide-in-bottom',
animationDuration: 200,
},
}
</route>
<template>
<view class="page-container">
<wd-navbar fixed placeholder :bordered="true" safeAreaInsetTop left-text="" left-arrow>
<template #title>听音练习</template>
</wd-navbar>

<!-- 视频播放器 -->  
<video  
  style="width: 100vw; left: 50%; transform: translateX(-50%); flex: 1"  
  id="videoContainer"  
  :src="selectSubVideo.mp4"  
  :controls="true"  
  @canplay="handleVideoCanPlay"  
  @timeupdate="handleVideoTimeUpdate"  
  @ended="handleVideoEnded"  
  @error="handleVideoError"  
  @progress="handleVideoProgress"  
  @loadedmetadata="handleLoadedMetadata"  
  @click="togglePlay"  
  :autoplay="true"  
  :loop="false"  
  :show-play-btn="true"  
  :show-fullscreen-btn="true"  
  :http-cache="true"  
></video>  

</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { toast } from '@/utils/toast'
import { url_Request } from '@/utils/http'
import { useUserStore } from '@/store/user'
import { useBookStore } from '@/store/book'
const userStore = useUserStore()
const bookStore = useBookStore()
const { schoolId } = storeToRefs(userStore)
const { selectSubVideo } = storeToRefs(bookStore)

// 加载状态控制
const isLoaded = ref(false)
const progress = ref(0)
const audioReady = ref(false)
const loadAudioContext = uni.createInnerAudioContext()

// 页面数据
const currentIndex = ref(0)
const url = ref('')

// 音频控制
const audioContext = ref(null)
const isPlaying = ref(false)

const index = ref(0)
// 页面初始化
onLoad(async (e) => {
console.log(selectSubVideo.value)
})

// 页面卸载清理
onUnload(() => {
if (loadAudioContext) {
loadAudioContext.stop()
loadAudioContext.destroy()
}
isLoaded.value = false
progress.value = 0
currentIndex.value = 0
isPlaying.value = false
audioReady.value = false
})

defineOptions({ name: 'add_book_infor' })
</script>

<style lang="scss" scoped>
.loading-container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}

.progress-box {
width: 600rpx;
text-align: center;
}

.progress-text {
display: block;
margin-bottom: 20rpx;
font-size: 32rpx;
color: #333;
}

.page-container {
padding: 0;
box-sizing: border-box;
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.swiper-item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.item-container {
position: relative;
width: 100%;
height: 100%;
}

.item-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 80%;
}

// 新增样式
.item-text-container {
position: absolute;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 20rpx; // 文字和勾选框之间的间距
}

.item-text {
font-size: 30rpx;
color: #fff;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.checkbox {
// 增加点击区域
padding: 10rpx;
// 防止点击事件冒泡影响轮播
pointer-events: auto;
}
</style>

操作步骤:

新建一个项目 放入一个video标签就能看出来bug

预期结果:

播放视频完成不显示一个重新加载的图标,有没法隐藏

实际结果:

播放视频完成会显示一个重新加载的图标,没法隐藏,点击还不是重新播放只是向后退了一秒

bug描述:

2025-08-25 10:32 负责人:无 分享
已邀请:

要回复问题请先登录注册