React: 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.

[tconroy]

this is quite odd.

With both the regular JSX syntax and the template-string version posted by @kohlmannj, I'm seeing the muted attribute stripped off of the node. All other attributes are kept in tact.

      <video
        muted
        playsInline
        preload
        loop
        autoPlay
      >
        <source src={this.state.src} type="video/mp4" />
      </video>

Any ideas what is going on here? This seems to work ok in iOS10, however Android seems to drop the muted attribute and just not play.

if I try to invoke play ie this.elementRef.play(), I get the must be initiated as a result of user interaction error.

Emulated Pixel on Android 7, mobile Chrome v.51.0.02704.90

[tconroy]

Has anyone gotten autoplay video to work on Android with React?

Seems to work on iOS 10 with playsInline + autoPlay but cannot get it to work consistently on Android. Is this limited by Android version?

[Swizec]

This is still an issue. Here was my original code:

const Video = ({ src, onEnded }) => (
  <video src={src} autoPlay playsInLine muted onEnded={onEnded} ref="video"/>
)

It would load videos but wouldn't play them on iOS.

I fixed it by doing this, but it produces a laggy experience because the video doesn't play immediately.

class Video extends Component {
    componentDidMount() { this.update(); }

    componentDidUpdate() { this.update(); }

    update() {
        this.refs.video.setAttribute('muted', '1');
        this.refs.video.setAttribute('playsinline', '1');
        this.refs.video.setAttribute('autoplay', '1');
    }

    render() {
        const { src, onEnded } = this.props;

        return (
            <video src={src} autoPlay playsInLine muted onEnded={onEnded} ref="video"/>
        )
    }
};

You can see the difference by going here on both iOS and Desktop. I haven't tried on Android.

[DylanVann]

I made a package to render a video tag using dangerouslySetInnerHTML.

It's pretty specific to my use case of animated gif like videos but feel free to send a PR or open an issue if you want something else.

https://github.com/DylanVann/react-video-tag

[diuis]

I enabled autoplay on iOS and React 16 with the videoelement defaultMuted property: https://gist.github.com/diuis/fc1c2f0e255538cda397c5a6b669c9bf

[jpdevries]

Um. We need the muted attribute in the HTML.

No limitation on autoplay muted video
https://medium.com/@sundaykuloksun/video-play-not-working-html5-autoplay-policy-beed81d64ca5

[lewisdonovan]

Thanks @kohlmannj that worked for me. This issue needs to be fixed though, it's well documented that muted is required for auto playback on iOS.

[shadeofgod]

ran into the same issue today.

<div>
  <video autoPlay loop muted playsInline>
    <source src={xxx} type="video/mp4" />
  </video>
</div>

only muted attribute was missing in real DOM.

create-react-app with react 15.5.4

[gen1321]

The issue should be reopened. I have the same problem

[vedadeepta]

Any update on this , facing this issue on react: 16.4.1.

[uguryilmaz-noxarc]

this is definitely happening. On chrome its OK. but on safari muted attribute is gone missing somehow. that causes unable to autoplay video

[davidhariri]

I'm having this issue as well.

[tomasdev]

REOPEN.

[cchawn]

Plus one – running into this issue as well
react 16.6.3

[MikuZZZ]

Same problem here.
React 16.4.1

[claygiffin]

Also running into this same issue.
React 16.7.0

[spoontstr]

same

[giles-v]

For others looking for this issue to be reopened - https://github.com/facebook/react/issues/10389 is probably the best issue to watch.

[tomasdev]

Proper solution should be to remove the audio track from the video.

If you can't, then create a separate component, so it doesn't update every time state or props change.

class Video extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.src !== this.props.src;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: `
        <video
          loop
          muted
          autoplay
          playsinline
          src="${this.props.src}"
        />,
      ` }}></div>
    );
  }
}

[amishPro]

I have the same problem.

[keithpickering]

Seriously guys? There's no way autoplaying muted videos on mobile is an edge case. I don't want to use animated GIFs because it's not 1999.

[jonlow]

Still an issue. Like others, I had to use the dangerouslySetInnerHTML option to get it working

[coryetzkorn]

I'm still experiencing this issue. muted attribute is being removed from video elements.

[scchess]

Yes, this is still an issue. Please fix it.

[joe-lloyd]

Can't use the dangerouslySetInnerHTML option because I need a ref to control it.

[duchu-net]

Issue still exist.

@joeLloyd - You can ref from parent ;)

dangerouslySetInnerHTML={{ __html: `<video>...</video>` }}
ref={ref => ref.children[0]} // <- it's video ref

[kasiaosinska]

Same problem here.
React 16.8.6.

[chapl]

I'm also having this problem although only on safari on iphone, the problem is reproducible. It's working on windows, android and mac in all the browsers I've tried. Stripping the audio track didn't work either.
If there's a reasonable work around or a github with a working feature please let me know.
Cheers

[cibulka]

Issue still exists on Safari, OSX 10.15.3, React 16.12.0.

[FerusAndBeyond]

Shouldnt this be reopened, such a critical issue isn't fixed for 4 years?

[alevosia]

A few eons later and React developers are still unable to autoplay background videos natively..

[loopmode]

Well.. I don't see the muted attribute in the DOM using devtools (Chrome, Firefox), but the video is definitely muted and we do have a working autoplay in our app.
Selecting the DOM node of the video and going $0.muted in the console does give true as well.
For us, it's just that the "muted" attribute is not shown in the DOM tree view.

There might be other aspects that prevent your autoplay functionality.

[boltcoder]

dangerouslySetHtml + playsInline+muted+autoplay+loop + removing audio from mp4 audio everything fails for ios 13.5.1. I've literally wasted 6 hours till now.

[boltcoder]

dangerouslySetHtml + playsInline+muted+autoplay+loop + removing audio from mp4 audio everything fails for ios 13.5.1. I've literally wasted 6 hours till now.

People who are just trying to autoplay muted (usually in banner background ). I wrote a medium article which can save you hours of googling.
https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5

Hope this helps!

[lucashfreitas]

4 years later and facing the same issue here.

<video muted is stripped out from the HTML.

Quite surprised as this feature was not considered in 4 years given that it is really necessary for who is developing a website with a lot of background/autoplay videos.

See: https://webkit.org/blog/6784/new-video-policies-for-ios/

There is any specific reason to not implement this? Would a PR be welcomed?

[cranberrymuffin]

@diuis

Converted your solution into a more concise one with hooks. Found yours to be the best one as it does not use dangerouslySetInnerHtml

props is expecting a 'video' prop containing the path to an mp4 file in the public directory, and 'className' containing any extra styling wanting to be done to the video (width, height, max-height, etc)...

export default function AutoPlaySilentVideo(props) {
    const videoRef = useRef(undefined);
    useEffect(() => {
        videoRef.current.defaultMuted = true;
    })
    return (
    <video className={props.className} ref={videoRef} loop autoPlay muted playsInline>
    <source
      src={props.video}
      type="video/mp4"
    />
  </video>);
}

[gaearon]

The problem here is that instead of filing a new issue with a reproducing case, the discussion is happening in a closed issue that no one is reading (because it is a closed issue). If this is still a problem please file a new issue with a repro case and we'll take a look.

[gaearon]

I'm locking so that if the issue is relevant, someone creates a new report.