Vue绑定<audio>/<video>标记的muted属性无效问题随记

发表于 更新于 阅读次数： 本文字数： 176 阅读时长 ≈ 1 分钟

问题代码

1
2
<!--这里的muted绑定不起作用-->
<audio :muted="isMuted" ref="audioPlayer"></audio>

援引Github上的issue回复

在这里插入图片描述

翻译：muted属性类似于<input>的value属性，如果他在元素初始化时是内联的，那么属性值将作为初始值；但是如果在一开始并没有内联，只是后续更改了attribute ^1 值，那么将不会起任何效果，正确的做法是设置相对应的property ^1 值。

解决方式：使用watch来手动设置muted

html

1
<audio ref="audioPlayer"></audio>

javascript

1
2
3
4
5
6
7
8
9
10
watch:{
	isMuted(val){
		if(val){
			this.$refs.audioPlayer.muted = 'muted'
		}
		else{
			this.$refs.audioPlayer.muted = ''
		}
	}
}