播放视频完成会显示一个重新加载的图标在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描述:

Image Image


更多关于播放视频完成会显示一个重新加载的图标在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平台上视频播放结束后会显示一个重新加载图标而非重新播放按钮。

解决方案:

  1. 自定义controls:设置 :controls="false" 并自定义控制栏
<video  
  :controls="false"
  :show-play-btn="true"
  :show-fullscreen-btn="true"
  @ended="handleVideoEnded"
></video>
  1. 手动处理结束事件
const handleVideoEnded = () => {
  // 获取video上下文
  const videoContext = uni.createVideoContext('videoContainer')
  // 重置播放时间到开头
  videoContext.seek(0)
  // 重新播放
  videoContext.play()
}
回到顶部