uni-app打包app首页是自动播放的视频页面视频还没有出来声音先出来
uni-app打包app首页是自动播放的视频页面视频还没有出来声音先出来
产品分类:
uniapp/App
PC开发环境操作系统:
Windows
PC开发环境操作系统版本号:
11
HBuilderX类型:
正式
HBuilderX版本号:
4.75
手机系统:
Android
手机系统版本号:
Android 16
手机厂商:
小米
手机机型:
K60
页面类型:
vue
vue版本:
vue2
打包方式:
云端
项目创建方式:
HBuilderX
示例代码:
<template>
<view>
<view class="video-box">
<video :show-loading="false" class="vid"
src="https://image-china-loading.oss-cn-chengdu.aliyuncs.com/static/guide.mp4"
:enable-progress-gesture="false" @ended="ended" object-fit="cover" autoplay
:controls="controls"></video>
</view>
</view>
</template>
<script>
export default {
data() {
return {
controls: true
}
},
onReady() {
// #ifdef APP
this.controls = false
// #endif
},
methods: {
ended() {
uni.redirectTo({
url: '/pages/index/index'
})
}
}
}
</script>
<style lang="scss">
.video-box {
width: 100vw;
height: 100vh;
.vid {
width: 100%;
height: 100%;
}
}
</style>
操作步骤:
App启动首页自动播放视频
预期结果:
等页面呈现才会自动播放视频
实际结果:
点击App loading还在加载 声音已经出来了,等页面展示已经是视频的最后一帧了
bug描述:
点击App loading还在加载 声音已经出来了,等页面展示已经是视频的最后一帧了
更多关于uni-app打包app首页是自动播放的视频页面视频还没有出来声音先出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html
你可以动态绑定autoplay,默认值为false,在onReady生命周期改为true
更多关于uni-app打包app首页是自动播放的视频页面视频还没有出来声音先出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这样不行,无法自动播放
回复 xiaoxin1212: 通过uni.createVideoContext控制播放暂停呢,onLoad暂停视频,onReady播放视频
回复 蔡cai: 偶尔还是会出现声音先出来页面没有出来,在首页的时候
回复 xiaoxin1212: 把autoplay设置为false,onReady通过uni.createVideoContext播放视频,这样呢
回复 蔡cai: autoplay默认是false,现在根据你的办法在onReady通过uni.createVideoContext播放视频,但是它好像取决于点击App加载的启动界面来决定,加载的久就有问题,加载的短就没有问题
回复 xiaoxin1212: 有一个想法不知道行不行:video标签上加ref=“video”,computed上添加一个getVideoInfo() { return this.$refs.video },watch监听getVideoInfo,有值的时候执行播放
这是一个典型的视频预加载和播放时序问题。在uni-app中,video组件的autoplay属性会在视频资源开始加载时就触发播放,导致音频先于画面渲染。
解决方案:
- 延迟播放控制:不要直接使用autoplay,改为在页面显示后手动触发播放
<template>
<view>
<view class="video-box">
<video ref="videoRef" :show-loading="false" class="vid"
src="https://image-china-loading.oss-cn-chengdu.aliyuncs.com/static/guide.mp4"
:enable-progress-gesture="false" @ended="ended" object-fit="cover"
:autoplay="false" :controls="controls"></video>
</view>
</view>
</template>
<script>
export default {
data() {
return {
controls: true,
videoContext: null
}
},
onReady() {
// #ifdef APP
this.controls = false
// #endif
this.videoContext = uni.createVideoContext('videoRef', this)
},
onShow() {
// 页面显示后开始播放
if (this.videoContext) {
setTimeout(() => {
this.videoContext.play()
}, 300) // 添加短暂延迟确保渲染完成
}
},
methods: {
ended() {
uni.redirectTo({
url: '/pages/index/index'
})
}
}
}
</script>
- 使用preload控制加载时机:设置preload="none"避免预加载
<video preload="none" ...></video>

