HTML5 video tag support muted parameter

[cometta]

I am unable to use muted parameter for <video autoplay muted loop>.. . Other parameters for video seems fine.

[jimfb]

Appears to work fine for me: http://jsfiddle.net/314xxopf/

[GTVanitha]

@cometta, which browser you are using?

[cometta]

you are right. i retested it. sorry. I proceed to close it.

[moret]

Strangely enough, I ran into the same issue today, on different Chrome versions. I tested with the fiddle above and the muted attribute is unavailable:

[moret]

I expanded a bit @jimfb's fiddle at http://jsfiddle.net/wmzjzjmm/ to check server rendering and tested in Safari as well. renderToString rendered both muted and controls attributes, despite only the controls attribute showing up when using render:

The video is muted despite the attribute not showing up, but I can only access the attribute when I'm resuming a server render.

[jimfb]

@moret When I run the code in your fiddle, the video appears to be muted (no sound). That's the only thing that React guarantees; React is not required to set the attribute if it is not required.

[zpao]

When rendering on the client we'll use the property since it was determined that modifying the attribute didn't actually affect the video. We must set it as node.muted = true|false, so you don't see that reflected in the attribute.

[moret]

@zpao makes sense, and that explains well the difference between the seemingly similar attributes. Thanks for the explanation!

[aza]

@zpao ohai, and also it seems that Mobile Safari in iOS10 uses the video's muted attribute to determine if the video can autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios; having video.muted == true isn't enough.

[lawlmart]

I'd argue this needs to be reopened. This breaks iOS10 autoplay support.

[zpao]

<video muted> elements will also be allowed to autoplay without a user gesture.

and

<video> elements will be allowed to play() without a user gesture if their source media contains no audio tracks, or if their muted property is set to true.

These conflicting statements lead me to believe we can (and probably should) continue using the property. We might just need to ensure that muted is set before autoplay.

---

Can somebody having an issue share the code they're having an issue with (hi @aza!) - I can't repro the problem but I could be looking at the wrong thing. Here's what I have:

ReactDOM.render(
  <video width="100%" controls autoPlay muted playsInline>
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
  </video>,
  document.getElementById('container')
);

This is rendering the video and autoplaying inline without any issue (iOS 10.1 in the simulator with React 15.4). If I leave off muted then it will not autoplay.

[mschipperheyn]

I have the same issue: react 15.4.2 + SSR

[kohlmannj]

I'm (begrudgingly) working around this issue by using dangerouslySetInnerHTML:

const VideoWorkaround = ({ src }) => (
  <div dangerouslySetInnerHTML={{ __html: `
    <video
      muted
      autoplay
      playsinline
      src="${src}"
    />
  ` }}
  />
);

This issue should absolutely be reopened.