uni-app Video API muted=true 在loop下一條影片時沒有作用

uni-app Video API muted=true 在loop下一條影片時沒有作用

开发环境 版本号 项目创建方式
Windows win 10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
3.1.13

手机系统：
Android

手机系统版本号：
Android 7.0

手机厂商：
電視盒

手机机型：
xxx

页面类型：
vue

打包方式：
云端

示例代码：

<video :src="getMyMedia()" autoplay loop muted=true controls=false @ended='playedEnd()'></video>  
VideoList = ["A.mp4","B.mp4"]  
VideoIndex = 0  

getMyMedia() {  
return this.VideoList [this.VideoIndex ]  
}  

playedEnd(){  
this.playIndex ++  
if (this.playIndex>=this.playList.length) {  
this.playIndex = 0  
}  
}

操作步骤：
看代碼

预期结果：
loop所有影片都應無聲

实际结果：
一開始A.mp4是無聲的,但下一條影片"B.mp4"就會變成有聲,而再下一條"A.mp4"又會變成有聲

bug描述：
在使用viedo及動態資源時(:src) muted=true 屬性不能遺傳
[“A.mp4”,“B.mp4”]
一開始A.mp4是無聲的,但下一條影片"B.mp4"就會變成有聲,而再下一條"A.mp4"又會變成有聲


更多关于uni-app Video API muted=true 在loop下一條影片時沒有作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这是历史遗留问题,临时解决办法 watch 监听 videosrc 判断 if (静音) {
静音 = false
setTimeout(() => {
静音 = true;
}, 200)
}

更多关于uni-app Video API muted=true 在loop下一條影片時沒有作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


第二種方法為<view v-html='test'></view> 用一button去改this.test的值 改為this.test = “” 這方法也不行

data() {
return {
myMuted:null,
tmp:null,
myIndex:0,
mySrc:[
‘/storage/emulated/0/KF_App/1-1/1/gg.mp4’,
‘/storage/emulated/0/KF_App/1-1/1/01.mp4’
]
}
},

watch: {  
    tmp(newVal,oldVal){  
        this.myMuted = false  
        setTimeout(()=>{  
            this.myMuted = true  
        },200)  
    }  
}<br>

在 uni-app 中，muted 属性在视频切换时失效是常见问题，原因是视频组件在切换 src 后部分属性状态不会自动保留。当 loop 触发播放下一视频时，muted 状态未被正确应用到新加载的视频上。

解决方案：
使用 ref 获取 video 组件实例，在 playedEnd 事件中通过代码强制设置静音。修改示例代码如下：

<video ref="videoRef" :src="getMyMedia()" autoplay loop :muted="isMuted" controls=false @ended='playedEnd()'></video>

data() {
  return {
    VideoList: ["A.mp4", "B.mp4"],
    VideoIndex: 0,
    isMuted: true
  }
},
methods: {
  playedEnd() {
    this.VideoIndex++;
    if (this.VideoIndex >= this.VideoList.length) {
      this.VideoIndex = 0;
    }
    // 确保视频切换后静音状态生效
    this.$nextTick(() => {
      const video = this.$refs.videoRef;
      if (video) {
        video.muted = true;
      }
    });
  }
}
回到顶部