Video Auto Play Is Not Working in Safari and Chrome Desktop Browser

Video auto play is not working in Safari and Chrome desktop browser

The best fix I could get was adding this code just after the </video>

<script>
    document.getElementById('vid').play();
</script>

...not pretty but somehow works.

UPDATE
Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too

<video autoplay muted>
...
</video>

Video autoPlay is not working chrome and safari?

I am not sure about Safari but Chrome has changed the autoplay policy. Look here:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

In order to autoplay, add muted attributed to video tag.

For example:

import React, { Component } from 'react';

class Player extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isVideoMuted: true
    };
  }

  handleMuteState = () => {
    this.setState(prevState => ({
      isVideoMuted: !prevState.isVideoMuted
    }));
  }

  render() {
    return (
      <div>
        <video muted={this.state.isVideoMuted} src="./video.mp4" />
        <button onClick={this.handleMuteState}>{this.state.isVideoMuted ? 'Unmute' : 'Mute'}</button >
      </div>
    );
  }
}

export default Player;

Video is playing in chrome,but it is not playing in safari browser

It only works when including playsinline.

<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true" loop muted playsinline ></video>
<video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true" loop muted playsinline></video>

Second solution :

if the first solution doesn't work, you may need to set the controls="true" flag.

<video loop autoplay controls="true"  src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" ></video>

FYI: if you run it on apple device e.g. Ipad/Iphone and then turn off the low power mode it may works.

HTML5 video autoplay not working in chrome

As per Google's latest policies, Muted videos can autoplay in Chrome. Autoplay with sound is allowed if:

• User has interacted with the domain (click, tap, etc.).
• On desktop, the user's Media Engagement Index threshold has been
  crossed, meaning the user has previously play video with sound.
• On mobile, the user has [added the site to their home screen].

Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

Also, put the following tag after your <source> tag:-

<source src="assets/watertuin.ogg" type="video/ogg">

See, if it works now.

Check more about Google autoplay policy changes on:- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Background video not auto playing on safari browser used svelte to build the website

The video is encoded by AV1 which is not supported by Safari entire apple ecosystem and Firefox on Android source

Video auto play is not working in Safari and Chrome desktop browser

The best fix I could get was adding this code just after the </video>

<script>
    document.getElementById('vid').play();
</script>

...not pretty but somehow works.

UPDATE
Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too

<video autoplay muted>
...
</video>

---

Related Topics