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    lt video height  256  loop autoplay muted controls id  vid  gt            lt source type  video mp4  src  video file mp4  gt  lt  source gt            lt source type  video ogg  src  video file ogg  gt  lt  source gt   lt  video gt    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

User · Answer

Angular 10   lt video  muted   quot true quot   autoplay   quot true quot   loop   quot true quot  gt       lt source src  quot  assets video mp4 quot  type  quot video mp4 quot   gt   lt  video gt

User · Answer

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

User · Answer

var video   document querySelector  video    video muted   true  video play    Only this solution helped me   lt video autoplay muted     gt     lt  video gt  didn t work

User · Answer

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

User · Answer

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  lt  2            return false        else           return true          function isScrolledIntoView el        var elementTop   el getBoundingClientRect   top      var elementBottom   el getBoundingClientRect   bottom      var isVisible   elementTop  lt  window innerHeight  amp  amp  elementBottom  gt   0      return isVisible    function playVideoClosestToCenter         var vids   document querySelectorAll  video        var smallestDistance   null      var smallestDistanceI   null      for  var i   0  i  lt  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  lt  smallestDistance                smallestDistance   distance              smallestDistanceI   i                      if  smallestDistanceI     null            vids smallestDistanceI  play            for  var i   0  i  lt  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  lt  vids length  i              if  isVideoPlaying vids i    amp  amp   isScrolledIntoView vids i                  vids i  pause                      if   isVideoPlaying vids i    amp  amp  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

User · Answer

Chrome does not allow to auto play video with sound on  so make sure to add muted attribute to the video tag like this   lt video width  320  height  240   autoplay muted gt     lt source src  video mp4  type  video mp4  gt   lt  video gt

User · Answer

For me the issue was that the muted attribute needed to be added within the video tag  I e      lt video width  1920  height  1980  src  video Night mp4  type  video mp4  frameborder  0  allowfullscreen autoplay loop muted gt  lt  video gt

User · Answer

Spent two hours trying all solutions mentioned above    This is what finally worked for me   var vid   document getElementById  myVideo    vid muted   true

User · Answer

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

User · Answer

I solved the same problem with     window  on  pageshow  function        var vids   document querySelectorAll  video        for  var i   0  i  lt  vids length            vids i  play               You have to launch the videos after the page has been shown

User · Answer

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        lt video autoplay muted gt       lt source src  video webm  type  video webm    gt       lt source src  video mp4  type  video mp4    gt   lt  video gt           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

User · Answer

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

User · Answer

Try this        lt video height  256  loop autoplay controls id  vid  gt        lt source type  video mp4  src  video file mp4  gt  lt  source gt        lt source type  video ogg  src  video file ogg  gt  lt  source gt      This is how I normally do it  loop  controls and autoplay do not require a value they are boolean attributes

User · Answer

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        gt    return        lt StyledVideo autoPlay loop muted gt           lt source src  video  type  quot video mp4 quot    gt       lt  StyledVideo gt        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

User · Answer

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

User · Answer

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  quot touchstart quot   function          var allVideos   document querySelectorAll  video        for  var i   0  i  lt  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

User · Answer

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       lt video autoplay loop id  quot myVideo quot  gt

User · Answer

Try this       lt video width  320  height  240   autoplay muted gt               lt source src  video mp4  type  video mp4  gt     lt  video gt

User · Answer

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

User · Answer

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     lt video autoplay preload  auto  loop  loop  muted  muted  id  videoBanner  class  videoBanner  gt   lt source src  banner-video webm  type  video webm  gt   lt source src  banner-video mp4  type  video mp4  gt   lt source src  banner-video ogg  type  video ogg  gt      var herovide   document getElementById  videoBanner           herovide autoplay true         herovide load

User · Answer

I ve just get now the same issue with my video   lt video preload  none  autoplay  autoplay  loop  loop  gt     lt source src  Home Teaser mp4  type  video mp4  gt     lt source src  Home Teaser  type  video webm  gt     lt source src  Home Teaser ogv  type  video ogg  gt   lt  video gt    After search  I ve found a solution   If I set  preload  attributes to  true  the video start normally

User · Answer

The best fix I could get was adding this code just after the  lt  video gt    lt script gt      document getElementById  vid   play     lt  script gt       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    lt video autoplay muted gt       lt  video gt

User · Answer

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

User · Answer

Google just changed their policy for autoplay videos  it has to be muted  You can check here so just add muted  lt video height  quot 256 quot  loop  quot true quot  autoplay  quot autoplay quot  controls  quot controls quot  id  quot vid quot  muted gt            lt source type  quot video mp4 quot  src  quot video file mp4 quot  gt  lt  source gt            lt source type  quot video ogg quot  src  quot video file ogg quot  gt  lt  source gt   lt  video gt

User · Answer

I got mine to autoplay by making it muted  I think Google rules won t let chrome auto-play unless it s muted   lt video id  quot video quot  controls autoplay muted         border 0px solid black  quot          width  quot 300 quot          height  quot 300 quot  gt       lt source src  quot   Videos Lumen5 CTAS Home2 mp4 quot              type  quot video mp4 quot    gt      Your browser does not support the video tag      Please download the mp4 plugin to see the CTAS Intro   lt  video gt

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

Examples related to javascript

Examples related to html

Examples related to google-chrome

Examples related to safari

Examples related to webkit