uni-app 纯nvue项目video自定义组件下静音配置安卓端无效

uni-app 纯nvue项目video自定义组件下静音配置安卓端无效

开发环境 版本号 项目创建方式
Windows Windows 64位家庭版 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：Alpha

HBuilderX版本号：3.1.19

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：红米

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

login.nvue 页面代码

<template>  
    <div>  
        <backgrounVideo></backgrounVideo>  
        <div class="background">  

        </div>  
    </div>  
</template>  

<script>  
    import backgrounVideo from "@/components/backgrounVideo";  
    export default {  

        components: {  
            backgrounVideo  
        },  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    /* 按钮样式 */  

</style>

backgrounVideo.nvue 组件代码

<template>  
    <video  
        ref="bgVideos"  
        id="bgVideo"  
        :src="backgroundSrc"  
        :autoplay="true"  
        :enable-progress-gesture="false"  
        :page-gesture="false"  
        :controls="false"  
        :muted="true"  
        :show-fullscreen-btn="false"  
        :show-center-play-btn="false"  
        :loop="true"   
        object-fit="fill"  
        :poster="poster"  
        :show-loading="false"  

    >  
     </video>  
</template>  

<script>  
    export default {  
        data  
        {  
            return{  
                poster:"",  
                backgroundSrc:"",  
            }  
        },  
        mounted(){  
            this.$nextTick(()=>{  
                //组件挂载完成后动态赋值视频地址  
                 this.backgroundSrc ='https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4';  
            })  
        },  

        methods: {  

        }  
    }  
</script>  

<style>  

</style>

更多关于uni-app 纯nvue项目video自定义组件下静音配置安卓端无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 纯nvue项目video自定义组件下静音配置安卓端无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中使用video组件时，安卓端的静音配置确实存在一些兼容性问题。根据你的代码分析，有几种可能的解决方案：

  1. 尝试在mounted生命周期中通过ref手动设置静音：
mounted(){
    this.$nextTick(()=>{
        this.backgroundSrc = '你的视频地址';
        setTimeout(() => {
            const videoContext = this.$refs.bgVideos;
            if(videoContext) {
                videoContext.muted = true;
            }
        }, 100);
    })
}

  1. 检查视频源本身是否包含音频轨道，某些视频文件即使设置了muted属性也可能在安卓设备上出现问题。

  2. 考虑使用uni.createVideoContext来创建视频上下文并设置静音：

const videoContext = uni.createVideoContext('bgVideo', this);
videoContext.mute();
回到顶部