HTMLMediaElement.muted = 真便携吗？

Question

我试图将音频静音，结果发现 setAttribute 在 Firefox 80.0.1 和 Chrome 85.0.4183.102 下根本不起作用。据我所知，这是设置布尔属性的标准方式。

video.setAttribute("muted", "muted");

令人惊讶的是，video.muted = true 有效。我不确定它是否可移植，因为它没有使用标准函数 SetAttribute，并且值为 not the canonical copy of muted.

Answer 1

muted 属性映射到 .defaultMuted IDL，而不是直接映射到 .muted 属性。

.muted 属性 首先设置为此 .defaulMuted 值，但之后更改 .defaultMuted 值不会更改 .muted 值。

这意味着在解析时，该属性将设置 .muted 的初始值，但是之后，更改该属性将不会。

const vid = document.getElementById("vid");
console.log( "defaultMuted:", vid.defaultMuted ); // true (because it has the attribute)
vid.removeAttribute( "muted" ); // set defaultMuted to false
console.log("### removed Attribute");
console.log( "has attribute:", vid.getAttribute( "muted" ) !== null );
console.log( "defaultMuted:", vid.defaultMuted ); // false (no attribute anymore)
console.log( "muted:", vid.muted ); // true (still muted anyway)
vid.defaultMuted = true; // set back the attribute through IDL
console.log("### set defaultMuted to true");
console.log( "has attribute:", vid.getAttribute( "muted" ) !== null ); // "" (which is a truthy value for booleans, would have been `null` if unset)

<video controls id="vid" muted></video>

动态 mute/unmute HTMLMediaElement 的正确方法确实是通过其 .muted 属性，但这不会在元素上设置任何属性。