HTML 5 Video autoplay not automatically starting in CHROME

Question

I have the following code    lt video controls autoplay gt     lt source src  video myVideo mp4  type  video mp4  gt      lt source src  video myVideo webm  type  video webm  gt     lt source src  video myVideo ogv  type  video ogg  gt     lt  video gt    The video    displays well in both Chrome and Firefox In Firefox it plays as expected In Chrome it displays but not  autostarts   This is the problem  If I click on it  in Chrome  it plays ok   Tried   lt video controls autoplay gt     lt  video gt   lt video controls autoplay  1  gt     lt  video gt   lt video controls autoplay  autoplay  gt     lt  video gt    Nothing worked in Chrome  Then I also tried changing the codec  as recommended in https   en wikipedia org wiki HTML5 video  but it also did not work    lt source src  movie webm  type  video webm  codecs  vp8 0  vorbis   gt       lt source src  movie ogv  type  video ogg  codecs  theora  vorbis   gt       lt source src  movie mp4  type  video mp4  codecs  avc1 4D401E  mp4a 40 2   gt    So now I am at a dead end  Thanks for any pointers  Much appreciated

User · Answer

This question are greatly described here
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

TL;DR You are still always able to autoplay muted videos

Also, if you're want to autoplay videos on iOS add playsInline attribute, because by default iOS tries to fullscreen videos
https://webkit.org/blog/6784/new-video-policies-for-ios/

User · Answer

You need to add playsinline autoplay muted loop  chrome do not allow a video to autostart if it is not muted  also right now I dont know why it is not working in all android devices  im trying to look if it s a version specific  If I found something I ll let you know  Chrome issue  After some research i have found that it doesnt work on chrome sometimes because in responsive you can activate the data saver  and it blocks any video to autostart

User · Answer

These are the attributes I used to get video to autoplay on Chrome - onloadedmetadata  this muted   true   playsinline  autoplay  muted  loop  Example    lt video src  path to video mp4  onloadedmetadata  this muted   true  playsinline autoplay muted loop gt  lt  video gt

User · Answer

Try this    lt video src     asset  path to your video mp4       muted autoplay loop playsinline gt  lt  video gt    And put this js after that   window addEventListener  load   async      gt      let video   document querySelector  video muted  autoplay       try       await video play        catch  err        video controls   true

User · Answer

I was just reading this article  and it says      Important  the order of the video files is vital  Chrome currently has a bug in which it will not autoplay a  webm video if it comes after anything else    So it looks like your problem would be solved if you put the  webm first in your list of sources  Hope that helps

User · Answer

Extremeandy has mentioned as of Chrome 66 autoplay video has been disabled   After looking into this I found that muted videos are still able to be autoplayed  In my case the video didn t have any audio  but adding muted to the video tag has fixed it     Hopefully this will help others also

User · Answer

This may not have been the case at the time the question was asked  but as of Chrome 66  autoplay is blocked   http   bgr com 2018 04 18 google-chrome-66-download-auto-playing-videos-block

User · Answer

Here is it  http   www htmlcssvqs com 8ed examples chapter-17 webm-video-with-autoplay-loop html You have to add the tags  autoplay  autoplay  loop  loop  or just  autoplay  and  loop

User · Answer

Try this when i tried giving muted   check this demo in  codpen        lt video width  320  height  240  controls autoplay muted id  videoId  gt     lt source src  http   techslides com demos sample-videos small mp4  type  video mp4  gt    Your browser does not support the video tag   lt  video gt    script  function toggleMute        var video document getElementById  videoId       if video muted       video muted   false      else       debugger      video muted   true      video play             document  ready function      setTimeout toggleMute 3000        edited attribute content  autoplay muted playsinline   https   developers google com web updates 2017 09 autoplay-policy-changes

[google-chrome] HTML 5 Video "autoplay" not automatically starting in CHROME

Examples related to google-chrome

Examples related to html5-video