HTML5 Video Autoplay not working correctly

Question

Im using this code    lt video width  440px  loop  true  autoplay  true  controls gt   lt source src  http   www example com CorporateVideo mp4  type  video mp4    gt   lt source src  http   www example com CorporateVideo ogv  type  video ogv    gt   lt source src  http   www example com CorporateVideo webm  type  video webm    gt   lt  video gt    I want the video to autoplay but when the page loads the video doesnt play  it looks like its a buffering issue as when I hover on the video  to show controls  the video is always 2seconds in but then stops and doesnt continue   Note  I just visited the site again and autopplay seemed to work but when I try again the same issue is happening  is this a buffering issue  Anything I can do to stop this   Many Thanks nick

User · Answer

Mobile browsers generally ignore this attribute to prevent consuming data until user explicitly starts the download.

UPDATE: newer version of mobile browser on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel:

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

User · Answer

Working solution October 2018  for videos including audio channel     document  ready function             video   prop  muted  true  play          Have a look at another of mine  more in-depth answer  https   stackoverflow com a 57723549 3049675

User · Answer

You might want to add some scripts if your software doesn t support jQuery or giving any reference type error        Use above scripts only if the software you are working on doesn t support jQuery            document  ready function        Change the location of your mp3 or any music file           var source       Assets music mp3            var audio   new Audio            audio src   source          audio autoplay   true

User · Answer

x000D   x000D  html   x000D    padding  20px 0  x000D    background-color   efefef  x000D    x000D   x000D  body   x000D    width  400px  x000D    padding  40px  x000D    margin  0 auto  x000D    background   fff  x000D    box-shadow  1px 1px 5px rgba 0  0  0  0 5   x000D    x000D   x000D  video   x000D    width  400px  x000D    display  block  x000D    x000D   lt video onloadeddata  this play   this muted false   poster  https   durian blender org wp-content themes durian images void png  playsinline loop muted controls gt  x000D       lt source src  http   grochtdreis de fuer-jsfiddle video sintel trailer-480 mp4  type  video mp4    gt  x000D      Your browser does not support the video tag or the file format of this video  x000D   lt  video gt  x000D   x000D   x000D

User · Answer

Try autoplay  autoplay  instead of the  true  value  That s the documented way to enable autoplay  That sounds weirdly redundant  I know

User · Answer

lt video width  quot 1000px quot  loop  quot true quot  autoplay  quot autoplay quot  controls muted gt  lt  video gt   worked for me

User · Answer

Chrome does not allow autoplay if the video is not muted  Try using this    lt video width  440px  loop  true  autoplay  autoplay  controls muted gt     lt source src  http   www tuscorlloyds com CorporateVideo mp4  type  video mp4    gt     lt source src  http   www tuscorlloyds com CorporateVideo ogv  type  video ogv    gt     lt source src  http   www tuscorlloyds com CorporateVideo webm  type  video webm    gt   lt  video gt

[video] HTML5 Video Autoplay not working correctly

Examples related to video

Examples related to video-streaming

Examples related to html5-video

Examples related to autoplay