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

Question

I spent quite a lot of time trying to figure out why video embedded like here:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

starts playing automatically once the page is loaded in FireFox but cannot do autoplay in Webkit based browsers. This only happened on some random pages. So far I was unable to find the cause. I suspect some unclosed tags or extensive JS created by CMS editors.

Philippopolis

is it working sometimes ? or not working at all... here is an example w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay that i check with chrome, and it works. – Archduchess

On some pages it is not working at all – Philippopolis

Facing the same issue, worked fine a week ago and without any change it just stopped working. Maybe it's a browser update, very annoying to have to manually play all the video tags via javascript – Pepillo

Not working for me in Chrome. – Kellerman

Answer 1

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>

Philippopolis

Or you can code with jQuery $("videoID").get(0).play(); #4647498 – Venerate

Or like this: $("video[autoplay]").each(function(){ this.play(); }); – Martins

still problem if its not muted developers.google.com/web/updates/2017/09/… – Circumstantiate

this won't work anymore without user interaction AFAIK – Underquote

see this #43570960 – Waylen

works in Chrome 2020 but tbh this hack can be the only reason chrome should stop invalidating autoplay – Silverts

To work on Safari mobile, I also had to include playsinline – Stromboli

autoplay="true" muted="true" , it works for me, thanks – Shigella

Muted somehow works – Minim

autoplay works only with muted – Idiophone

Answer 2

After using jQuery play() or DOM maniupulation as suggested by the other answers, it was not still working (Video wasn't autoplaying) in the Chrome for Android (Version 56.0).

As per this post in developers.google.com, From Chrome 53, the autoplay option is respected by the browser, if the video is muted.

So using autoplay muted attributes in video tag enables the video to be autoplayed in Chrome browsers from version 53.

Excerpt from the above link:

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set[...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• Muted autoplay is supported by Safari on iOS 10 and later.
• Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay.

Boogie

I had this issue in Safari 11 where a background video (no audio) wouldn't play automatically. Adding muted and autoplay did the trick. Thanks! – Ifill

So why then does autoplay, WITH sound on, work for youtube? It has worked that way since the site's inception. – Catling

Answer 3

Google just changed their policy for autoplay videos, it has to be muted

You can check here

so just add muted

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Jameson

John Pallett's comment on the new policy. He is Google Chrome's Product Manager and Media Muter. – Frivol

Answer 4

It happens that Safari and Chrome on Desktop do not like DOM manipulation around the video tag. They will not fire the play order when the autoplay attribute is set even if the canplaythrough event has fired when the DOM around the video tag has changed after initial page load. Basically I had the same issue until I deleted a .wrap() jQuery around the video tag and after that it autoplayed as expected.

Genu

Good call that it doesn't work with .wrap(). However, as far as I can tell, the code needs .get(0) to work: $("#vid").get(0).play(); – Homeo

@Homeo .get(0) or just $('#vid')[0].play() – Taka

Oct 2017, video not autoplaying in spite of attribute in tag is still an issue in Safari. Using [0].play() as suggested by mattsoave/pmrotule solved the issue. – Psychotherapy

Answer 5

For me the issue was that the muted attribute needed to be added within the video tag. I.e.:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Linskey

Works for latest Chrome on Windows8 – Latta

On Crome if i add muted disable sound. I don't want this – Straitlaced

Answer 6

It worked for me when combined with muted attribute

Deficit

I don't understand the logic behind it but it works for me! – Fulminate

correct answer for this question – Confidential

THIS! Thank you! Makes sense too! I just wish there was better documentation/logging to indicate that. – Janeanjaneczka

Answer 7

Chrome does not allow to auto play video with sound on, so make sure to add muted attribute to the video tag like this

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Schargel

That doesn't add anything new. The accepted answer already mentions this. Also the second answer goes into detail. – Protostele

Answer 8

var video = document.querySelector('video');
video.muted = true;
video.play()

Only this solution helped me, <video autoplay muted ...>...</video> didn't work...

Inhabited

Answer 9

I've just get now the same issue with my video

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

After search, I've found a solution:

If I set "preload" attributes to "true" the video start normally

Biped

The preload attribute is ignored by browser if autoplay is present. – Penhall

Answer 10

I had a problem when playing a video on Safari on iPhones. Adding the playsinline attribute in the video tag can solve this problem, and it works!

<video autoplay muted loop playsinline class="someClass">
  <source src="source.mp4" type="video/mp4">
</video>

You will also get this problem on Safari on OSX, in case you get yourself confused about this property playsinline, here is the explaination.

Mobile browsers, playsinline will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.

For the Safari on OSX, as the default websites Auto-Play option is Stop Media with Sound, this strategy can also introduce the permission issue.

That's why we need the property muted.

Maleki

This worked for me in 2021 – Net

Still going strong in 2022. – Astolat

Answer 11

Try this:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

Fulvi

Answer 12

On safari iPhone when battery is low and iPhone is on Low Power Mode it won`t autoplay, even if you have the following attributes: autoplay, loop, muted, playsinline set on your video html tag.

Walk around I found working is to have user gesture event to trigger video play:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

You can read more about user gesture and Video Policies for iOS in webkit site:

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

Crosspurpose

Answer 13

For angular, you'll have to mute it and play it in the ngAfterViewInit() like the following

<video height="256" loop autoplay muted controls id="vid" #videoRef>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

 ​@ViewChild('videoRef', { static: true }) videoRef!: ElementRef

​ngAfterViewInit(): void {
  ​const media = this.videoRef.nativeElement
  ​media.muted = true 
  ​media.play() 
​ } 

Berndt

Answer 14

Adding the below code at the bottom of the page worked for me . I dont know why it works :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Postman

reason is because you are waiting for the video to be loaded within the buffer then you play it. – Impressionism

To be a bit more specific here: the code above waits for 1 second (1000ms) and then plays the video. It doesn't wait for the video to be loaded as it doesn't know when the video is done. To get the correct moment when video is loaded, one should use document.getElementById('vid').addEventListener('loadeddata', function (){//do whatever you want}); more details on the event here. – Drool

Answer 15

• Please use muted keyword before autoplay word, Here some privacy change at April, 2018.
• You may read policy here

Schriever

Answer 16

We recently addressed a similar issue with an embedded video and found that the autoplay and muted attributes were not sufficient for our implementation.

We added a third "playsinline" attribute to the code and it fixed the issue for iOS users.

This fix is specific to videos that are to be played inline. From https://webkit.org/blog/6784/new-video-policies-for-ios/ :

On iPhone, elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone. When exiting fullscreen with a pinch gesture, elements without playsinline will continue to play inline.

Pustulant

Answer 17

Google updated Autoplay Policy. Autoplay only work on mute mode. Check the link https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Romance

the video is muted, check the question – Yamada

Answer 18

Try swapping in autoPlay for autoplay.

It seems to be case sensitive at times. Very bizarre because it worked as autoplay for me, but only if I included controls

Multiversity

Wow, this worked for me! Did not expect that – Hear

Answer 19

Try this:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

This is how I normally do it. loop, controls and autoplay do not require a value they are boolean attributes.

Samford

Answer 20

I got mine to autoplay by making it muted. I think Google rules won't let chrome auto-play unless it's muted.

<video id="video" controls autoplay muted
        border:0px solid black;"
        width="300"
        height="300">
    <source src="~/Videos/Lumen5_CTAS_Home2.mp4"
            type="video/mp4" />
    Your browser does not support the video tag.
    Please download the mp4 plugin to see the CTAS Intro.
</video>

Onlybegotten

Answer 21

None of the other answers worked for me. My workaround was to trigger a click on the video itself; hacky (because of the timeout that is needed) but it works fine:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Alkaline

Nothing worked on Chrome worked for me either. With the .play() fix (hack) above I was getting a "Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()." in the console. There was a few other jQuery functions on the page, so thought that a timer would give Chrome enough time to sort itself out. It worked. I set a 0.5 second timer in $( document ).ready() – Diastasis

Answer 22

Spent two hours trying all solutions mentioned above.

This is what finally worked for me:

var vid = document.getElementById("myVideo");
vid.muted = true;

Tradelast

Answer 23

Angular 10:

<video [muted]="true" [autoplay]="true" [loop]="true">
    <source src="/assets/video.mp4" type="video/mp4"/>
</video>

Tulley

In my case, this still didn't work (Angular 11.2) in Chrome. In the code I checked the video elements muted value and it was still set to false. Manually changing it to true fixed the issue. Example: const videoElm = this.backgroundVideo.nativeElement as HTMLVideoElement; videoElm.muted = true; – Libertinage

Answer 24

Nothing worked on Safari iOS until I added playsinline attribute to the video.

If you're using react based application it would be playsInline.

Dungdungan

Answer 25

This is because of now chrome is preventing auto play in html5 video, so by default they will not allow auto play. so we can change this settings using chrome flag settings. this is not possible for normal case so i have find another solution. this is working perfect... (add preload="auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

Anagram

Answer 26

<video onload='this.play()' src='the source' autoplay controls></video>

This worked for me.

Pathe

This answers points the core problem with autoplay of videos. The rule of thumb is that nothing on page can do sounds automatically, without prior user interaction. Muting makes autoplay on page load possible. – Retha

Answer 27

iOS Safari, Safari requires us to add the playsinline attribute.

<video autoplay muted playsinline>
    <source src="video.mp4" type="video/mp4" />
</video>

Bannerman

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Crease

Answer 28

I had a case where it had something to do with the order of the different filetypes. Try to change it and see if that helps.

Witha

Answer 29

I started out with playing all the visible videos, but old phones weren't performing well. So right now I play the one video that's closest to the center of the window and pause the rest. Vanilla JS. You can pick which algorithm you prefer.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Templas

Answer 30

I solved the same problem with,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

You have to launch the videos after the page has been shown.

Leniency

Answer 31

Try this it is simple and short and it works with my code whereas I have the video full screen and behind other elements I simply use z-index -1;

    <video autoplay loop id="myVideo">

Rolf

Answer 32

In React + Chrome, it's better to import the video than give it as src to .

import React from 'react';
import styled from 'styled-components';
import video from './videos.mp4';
const StyledVideo = styled.video`
width: 100%;
height: 100vh;
object-fit: cover;
`
const BackgroundVideo = () => {
return (
    <StyledVideo autoPlay loop muted>
        <source src={video} type="video/mp4" />
    </StyledVideo>
);
}

Remember

• The video is in the same directory, to import it.
• To autoplay, the video in the background, use autoPlay and muted props are there.

Errhine

Answer 33

Angular 15:

• This script wasn't appending the element to the DOM on ios Safari until I added the additional appendChild method in the catch statement.

Component:

  @ViewChild('videoPlayer') videoPlayer!: ElementRef;

  video_playback_error: boolean = false;

...


  ngAfterViewInit(): void {
    this.ngZone.runOutsideAngular(() => {
   this.playVideo();
    });
  }

playVideo() {
    let that = this;
    let v = document.createElement('video');
    v.id = 'videoElement'
    v.src = this.mp4_video_url; // we need this
    v.muted = true;
    v.autoplay = true;
    v.loop = true;
    v.preload = 'none';
    v.playsInline = true;
    v.crossOrigin="anonymous";
    v.classList.add("w-full", "desktop-sm:h-[700px]", "h-[calc(95vh-150px)]", "absolute", "top-0", "left-0", "object-cover");
    const promise = v.play();

    if (promise !== undefined) {
      promise.then(function() {
        console.log('autoplay started');
        that.videoPlayer.nativeElement.appendChild(v);
        v.muted = true;
        v.autoplay = true;
        v.src = that.mp4_video_url;

      // Automatic playback started!
      }).catch(function(error) {
        console.log('autoplay error - attempting to play again in .mp4 | ', error);
        v.muted = true;
        v.autoplay = true;
        v.src = that.mp4_video_url;
        
        let fallback = v.play();
        if (fallback !== undefined) {
          fallback.then((_: any) => {
            
            console.log('autoplay started');
            that.videoPlayer.nativeElement.appendChild(v);
            v.muted = true;
            v.autoplay = true;
            v.src = that.mp4_video_url;
            // Autoplay started!
          }).catch((error: any) => {

            console.log('autoplay failed - falling back to image | ', error)
            that.video_playback_error = true;
          })
        } else {
          that.video_playback_error = true;
        }
      });
    } else {
      this.video_playback_error = true;
    }
  }

Template:

 <div #videoPlayer class="block"></div>

Unattached

Answer 34

Well I am writing this answer for people who are still stuck in 2024.

Cases: 1. Everything works fine on chrome but not on safari?

-> Possible solution : Change your battery saver setting to never. It only works in this setting! (Wth safari :/)

2. For chrome even if you have autplay, playsinline and muted

-> Chances are your chrome is still not setting muted to true, you need to do oncanplay -> videoRef.muted=true. whichever frontend frame you are using!

Acrodont

Answer 35

One line:

    <video autoplay muted loop onloadeddata="event.target.play()">

Pily