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

8 回复

你可以动态绑定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属性会在视频资源开始加载时就触发播放,导致音频先于画面渲染。

解决方案:

  1. 延迟播放控制:不要直接使用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>
  1. 使用preload控制加载时机:设置preload="none"避免预加载
<video preload="none" ...></video>
回到顶部