播放视频完成会显示一个重新加载的图标在uni-app中没法隐藏,点击还不是重新播放只是向后退了一秒
播放视频完成会显示一个重新加载的图标在uni-app中没法隐藏,点击还不是重新播放只是向后退了一秒
产品分类:
uniapp/App
PC开发环境操作系统:
Windows
PC开发环境操作系统版本号:
windows10
HBuilderX类型:
正式
HBuilderX版本号:
4.76
手机系统:
Android
手机系统版本号:
Android 16
手机厂商:
vivo
手机机型:
iq00 neo10
页面类型:
vue
vue版本:
vue3
打包方式:
云端
项目创建方式:
HBuilderX
示例代码:
{
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "听音练习",
"animationType": "slide-in-bottom",
"animationDuration": 200,
}
}
<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>
.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;
}
操作步骤:
新建一个项目 放入一个video标签就能看出来bug
预期结果:
播放视频完成不显示一个重新加载的图标,有没法隐藏
实际结果:
播放视频完成会显示一个重新加载的图标,没法隐藏,点击还不是重新播放只是向后退了一秒
bug描述:

更多关于播放视频完成会显示一个重新加载的图标在uni-app中没法隐藏,点击还不是重新播放只是向后退了一秒的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于播放视频完成会显示一个重新加载的图标在uni-app中没法隐藏,点击还不是重新播放只是向后退了一秒的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是uni-app video组件的已知问题,在Android平台上视频播放结束后会显示一个重新加载图标而非重新播放按钮。
解决方案:
- 自定义controls:设置
:controls="false"并自定义控制栏
<video
:controls="false"
:show-play-btn="true"
:show-fullscreen-btn="true"
@ended="handleVideoEnded"
></video>
- 手动处理结束事件:
const handleVideoEnded = () => {
// 获取video上下文
const videoContext = uni.createVideoContext('videoContainer')
// 重置播放时间到开头
videoContext.seek(0)
// 重新播放
videoContext.play()
}

