How to autoplay HTML5 mp4 video on Android

Question

I had developed a mobile page by asp net to play mp4 video   I know iOS had disabled the autoplay function to minimize user bandwidth  so how can i  autoplay HTML5 mp4 video on Android     I had already put autoplay in HTML5 code  but it doesn t work   The following is my code    lt video autoplay controls id  video1  width  100   poster  images top icon png  webkitEnterFullscreen poster preload  true  gt   lt source src  http   192 xxx xxx xx XXXXVM01 mp4  type  video mp4  codecs  avc1 42E01E  mp4a 40 2   gt   lt  video gt    Moreover  I had fixed the problem that user click on the image overlay can play the video  Thanks Karthi  here are the code    lt script type  text javascript  gt        document  ready function             video1   bind  click   function         var vid     this  get 0       if  vid paused    vid play          else   vid pause                     lt  script gt    Thanks  Joe

User · Answer

Autoplay only works the second time through. on android 4.1+ you have to have some kind of user event to get the first play() to work. Once that has happened then autostart works.

This is so that the user is acknowledging that they are using bandwidth.

There is another question that answers this . Autostart html5 video using android 4 browser

User · Answer

I simplified the Javascript to trigger the video to start    x000D   x000D   var bg   document getElementById   bg     x000D   function playbg     x000D     bg play     x000D     x000D   lt video id  bg  style  min-width 100   min-height 100     playsinline autoplay loop muted onload  playbg      gt  lt source src  Files snow mp4  type  video mp4  gt  lt  video gt  x000D   lt  td gt  lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D      Files snow mp4  is just sample url

User · Answer

don t use  quot mute quot  alone  use  muted   quot true quot  for example following code   lt video id  quot videoPlayer quot   muted   quot true quot  autoplay playsinline loop style  quot width 100   height  100   quot  gt   lt source type  quot video mp4 quot  src  quot assets Video Home mp4 quot  gt   lt source type  quot video webm quot  src  quot assets Video Home webm quot  gt   lt  video gt   I test in more Android and ios

User · Answer

lt video autoplay controls id  video1  width  100   poster  images top icon png  webkitEnterFullscreen poster preload  true  gt   lt source src  http   192 xxx xxx xx XXXXVM01 mp4  type  video mp4  codecs  avc1 42E01E  mp4a 40 2   gt   lt  video gt

User · Answer

Can add muted tag    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    reference https   developers google com web updates 2016 07 autoplay

User · Answer

In Android 4 4 and above you can remove the need for a user gesture so long as the HTML5 Video component lives in your own WebView  webview setWebChromeClient new WebChromeClient     webview getSettings   setMediaPlaybackRequiresUserGesture false     To get the video to autoplay  you d still need to add autoplay to the video element    lt video id  video  controls autoplay gt     lt source src  http   192 xxx xxx xx XXXXVM01 mp4  type  video mp4  codecs  avc1 42E01E  mp4a 40 2    gt   lt  video gt

User · Answer

I used the following code      get the video var video   document querySelector  video       use the whole window and a  named function  window addEventListener  touchstart   function videoStart       video play      console log  first touch         remove from the window and call the function we are removing   this removeEventListener  touchstart   videoStart         There doesn t seem to be a way to auto-start anymore   This makes it so that the first time they touch the screen the video will play  It will also remove itself on first run so that you can avoid multiple listeners adding up

User · Answer

Important Note  Be aware that if Google Chrome Data Saver is enabled in Chrome s settings  then Autoplay will be disabled

User · Answer

Android actually has an API for this   The method is setMediaPlaybackRequiresUserGesture     I found it after a lot of digging into video autoplay and a lot of attempted hacks from SO   Here s an example from blair vanderhoof   package com example myProject   import android os Bundle  import org apache cordova    import android webkit WebSettings   public class myProject extends CordovaActivity         Override     public void onCreate Bundle savedInstanceState                super onCreate savedInstanceState           super init               Set by  lt content src  index html    gt  in config xml         super loadUrl Config getStartUrl               super loadUrl  file    android asset www index html             WebSettings ws   super appView getSettings            ws setMediaPlaybackRequiresUserGesture false

User · Answer

Chrome has disabled it  https   bugs chromium org p chromium issues detail id 159336 Even the jQuery play   is blocked  They want user to initiate it so bandwidth can be saved

User · Answer

You can add the  muted  and  autoplay  attributes together to enable autoplay for android devices    e g     x000D   x000D   lt video id  video  class  video  autoplay muted  gt  x000D   x000D   x000D

User · Answer

Here is a plugin for PhoneGap which solved the problem for me  https   build phonegap com plugins 1031  I simply included it in my config xml

User · Answer

I don t think autoplay works on Android  but getting a video to play can be annoyingly tricky  I suggest giving this article a read  Making HTML5 Video work on Android phones

User · Answer

In Android 4 1 and 4 2  I use the following code       evt initMouseEvent   click   true true window 0 0 0 0 0 false false false false 0  true        var v   document getElementById  video        v dispatchEvent evt     where html is       lt video id  video  src  sample mp4  poster  image jpg  controls gt  lt  video gt    This works well  But In Android 4 4  it does not work

User · Answer

similar to KNaito s answer  the following does the trick for me  function simulateClick       var event   new MouseEvent  click          view   window       bubbles   true       cancelable   true         var cb   document getElementById  player       var canceled    cb dispatchEvent event     if  canceled           A handler called preventDefault      alert  canceled        else          None of the handlers called preventDefault      alert  not canceled

[android] How to autoplay HTML5 mp4 video on Android?

Examples related to android

Examples related to html

Examples related to html5-video