1588360 - <video> `muted` attr not work

Status: UNCONFIRMED

(Core :: Audio/Video, defect, P3)

Description

[709922234]

Attachment: Screen Shot 2019-10-13 at 16.56.11.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

1. open https://mantou132.github.io/audio-to-video/build/
2. view <video>

Actual results:

<video>.outerHTML is <video controls="" muted=""></video>

<video>.muted is false

Expected results:

<video>.muted is true

Comment 1

[Jan-Ivar Bruaroey [:jib] (needinfo? me)]

I've verified it shows as muted false, in contrast to e.g. Chrome, so this looks like a bug.

However, it appears to work fine in a simpler case, so it's not clear to me this is a media-element problem.

The video element in comment 0 appears to be a shadow-root object, and it's a bit hard to follow how it gets initialized. There's also some audio capture code in there, which seems confusing. Would you happen to have a more reduced test case?

Comment 2

[Jan-Ivar Bruaroey [:jib] (needinfo? me)]

This looks like an HTML problem. Anne, can you make heads or tails of the shadow dom init stuff in comment 0?

Comment 3

[Anne (:annevk)]

I created these web-platform-tests:

test(t => {
  const vid = document.createElement("video");
  t.add_cleanup(() => vid.remove());
  vid.setAttribute("muted", "");
  document.body.append(vid);
  assert_true(vid.muted);
}, "<video muted> in the light tree");

test(t => {
  const vid = document.createElement("video");
  const host = document.createElement("div");
  t.add_cleanup(() => host.remove());
  const shadow = host.attachShadow({ mode: "closed" });
  vid.setAttribute("muted", "");
  shadow.append(vid);
  document.body.append(host);
  assert_true(vid.muted);
}, "<video muted> in the shadow tree");

test(t => {
  const host = document.createElement("div");
  t.add_cleanup(() => host.remove());
  host.innerHTML = "<video muted></video>";
  document.body.append(host);
  assert_true(host.firstChild.muted);
}, "<video muted> in the light tree using innerHTML");

test(t => {
  const host = document.createElement("div");
  t.add_cleanup(() => host.remove());
  const shadow = host.attachShadow({ mode: "closed" });
  shadow.innerHTML = "<video controls muted></video>";
  document.body.append(host);
  assert_true(shadow.firstChild.muted);
}, "<video muted> in the shadow tree using innerHTML");

And Chrome and Firefox have consistent results. Safari passes all, but that's against the letter of the standard which currently does the muted attribute check during creation (maybe that ought to change however).

I cannot figure out how to get a different result between Chrome and Firefox however.

Comment 4

[Anne (:annevk)]

(I filed https://github.com/whatwg/html/issues/5013 on the difference I found with Safari where I think Safari has a better model, FWIW.)

Comment 5

[709922234]

I can't provide a simple reduced test case, I can only provide the source code for this page:
https://github.com/mantou132/audio-to-video

Comment 6

[eddsworld]

get audio() {
return this.shadowRoot.querySelector('audio') as HTMLAudioElementExt;
}

You have this function in your index.ts, which may force enable the audio of the Video.
Consider this in Line 15,16 & 17 in your Index.ts