HTML5 video element on Android

Question

According to   http   developer android com sdk android-2 0-highlights html  Android 2 0 should support the HTML5 video element  I haven t been able to get this to work using a Motorola Droid  and haven t been able to successfully view a video on any of the HTML5 video example pages out there  Since there currently isn t support for QuickTime or Flash  this is the only other thing I can think of for embedding mp4 video in a web page  Has anyone had any luck with this

User · Answer

Try h 264 in an mp4 container  I ve had much success with it on my Droid X  I ve been using zencoder com for format conversions

User · Answer

Nothing worked for me until I encoded the video properly   Try this guide for the correct handbrake settings  http   forum handbrake fr viewtopic php f 7 amp t 9694

User · Answer

Maybe you have to encode the video specifically for the device eg    lt video id  movie  width  320  height  240  autobuffer controls gt     lt source src  pr6 ogv  type  video ogg  codecs  theora  vorbis   gt     lt source src  pr6 mp4  type  video mp4  codecs  avc1 42E01E  mp4a 40 2   gt   lt source src  pr6 mp4  type  video mp4  codecs  some droid video codec  some droid audio codec   gt   lt  video gt    There are some examples of encoding configurations that worked on here   https   supportforums motorola com

User · Answer

It s supposed to work  but watch the resolution  Android 2 0 and webkit     Canvas works right out of the box    while Geolocation seems to not work at   all in the Emulator  Of course  I have   to send it mock locations to get it to   work  so I have no idea what this   would be like on an actual phone  I   can say the same thing with the video   tag  There are issues with it not   actually playing the video  BUT I   think it   s the fact that the video is   a higher resolution than what the   Emulator can handle  We   ll know more   once someone tries this on a Motorola   Droid or other next-gen Android device

User · Answer

Roman s answer worked fine for me - or at least  it gave me what I was expecting  Opening the video in the phone s native application is exactly the same as what the iPhone does   It s probably worth adjusting your viewpoint and expect video to be played fullscreen in its own application  and coding for that  It s frustrating that clicking the video isn t sufficient to get it playing in the same way as the iPhone does  but seeing as it only takes an onclick attribute to launch it  it s not the end of the world   My advice  FWIW  is to use a poster image  and make it obvious that it will play the video  I m working on a project at the moment that does precisely that  and the clients are happy with it - and also that they re getting the Android version of a web app for free  of course  because the contract was only for an iPhone web app   Just for illustration  a working Android video tag is below  Nice and simple    lt video src  video placeholder m4v  poster  video placeholder jpg  onclick  this play      gt

User · Answer

According to   https   stackoverflow com a 24403519 365229     This should work  with plain Javascript   var myVideo   document getElementById  myVideoTag     myVideo play    if  typeof myVideo webkitEnterFullscreen      undefined            This is for Android Stock      myVideo webkitEnterFullscreen      else if  typeof myVideo webkitRequestFullscreen       undefined            This is for Chrome      myVideo webkitRequestFullscreen      else if  typeof myVideo mozRequestFullScreen       undefined         myVideo mozRequestFullScreen            You have to trigger play   before the fullscreen instruction    otherwise in Android Browser it will just go fullscreen but it will   not start playing  Tested with the latest version of Android Browser    Chrome  Safari    I ve tested  it on Android 2 3 3  amp  4 4 browser

User · Answer

pointing my android 2 2 browser to html5test com  tells me that the video element is supported  but none of the listed video codecs    seems a little pointless to support the video element but no codecs    unless there is something wrong with that test page   however  i did find the same kind of situation with the audio element  the element is supported  but no audio formats  see here   http   textopiablog wordpress com 2010 06 25 browser-support-for-html5-audio

User · Answer

After much research  in many different devices  up to now  I ve reached the simple conclusion that MP4 is much less supported than MOV format  So  I m using MOV format  which is supported by all Android and Apple devices  on all browsers  I ve detected weather the device is a mobile device or a desktop browser  and set the SRC accordingly   if  IsMobile              vid   attr  src     uploads     name     mov      else           vid   attr  src     uploads     name     webm               function IsMobile         var isMobile   false    initiate as false      if    android bb d  meego   mobile avantgo bada   blackberry blazer compal elaine fennec hiptop iemobile ip hone od  ipad iris kindle Android Silk lge  maemo midp mmp netfront opera m ob in i palm  os   phone p ixi re    plucker pocket psp series 4 6 0 symbian treo up   browser link  vodafone wap windows  ce phone  xda xiino i test navigator userAgent                      1207 6310 6590 3gso 4thp 50 1-6 i 770s 802s a wa abac ac er oo s -  ai ko rn  al av ca co  amoi an ex ny yw  aptu ar ch go  as te us  attw au di  -m r  s   avan be ck ll nq  bi lb rd  bl ac az  br e v w bumb bw - n u  c55   capi ccwa cdm - cell chtm cldc cmd - co mp nd  craw da it ll ng  dbte dc -s devi dica dmob do c p o ds 12  -d  el 49 ai  em l2 ul  er ic k0  esl8 ez  4-7 0 os wa ze  fetc fly  -    g1 u g560 gene gf -5 g -mo go   w od  gr ad un  haie hcit hd - m p t  hei - hi pt ta  hp  i ip  hs -c ht c  -     a g p s t  tp  hu aw tc  i - 20 go ma  i230 iac    -     ibro idea ig01 ikom im1k inno ipaq iris ja t v a jbro jemu jigs kddi keji kgt       klon kpt  kwc - kyo c k  le no xi  lg  g    k l u  50 54  - a-w   libw lynx m1 -w m3ga m50   ma te ui xo  mc 01 21 ca  m -cr me rc ri  mi o8 oa ts  mmef mo 01 02 bi de do t  -   o v  zz  mt 50 p1 v   mwbp mywa n10 0-2  n20 2-3  n30 0 2  n50 0 2 5  n7 0 0 1  10  ne  c m  - on tf wf wg wt  nok 6 i  nzph o2im op ti wv  oran owg1 p800 pan a d t  pdxg pg 13  -  1-8  c   phil pire pl ay uc  pn -2 po ck rt se  prox psio pt -g qa -a qc 07 12 21 32 60  - 2-7  i -  qtek r380 r600 raks rim9 ro ve zo  s55   sa ge ma mm ms ny va  sc 01 h - oo p -  sdk   se c  - 0 1  47 mc nd ri  sgh - shar sie  - m  sk -0 sl 45 id  sm al ar b3 it t5  so ft ny  sp 01 h - v - v   sy 01 mb  t2 18 50  t6 00 10 18  ta gt lk  tcl - tdg - tel i m  tim - t -mo to pl sh  ts 70 m - m3 m5  tx -9 up   b g1 si  utst v400 v750 veri vi rg te  vk 40 5 0-3   -v  vm40 voda vulc vx 52 53 60 61 70 80 81 83 85 98  w3c  -    webc whit wi g  nc nw  wmlb wonu x700 yas - your zeto zte - i test navigator userAgent substr 0  4    isMobile   true      return isMobile

User · Answer

If you manually call video play   it should work    lt  DOCTYPE html gt   lt html gt   lt head gt     lt script gt      function init           enableVideoClicks               function enableVideoClicks           var videos   document getElementsByTagName  video                for  var i   0  i  lt  videos length  i                 TODO  use attachEvent in IE         videos i  addEventListener  click   function videoNode              return function                 videoNode play                           videos i                      lt  script gt   lt  head gt   lt body onload  init    gt      lt video src  sample mp4  width  400  height  300  controls gt  lt  video gt           lt  body gt   lt  html gt

User · Answer

This works for me    lt video id  video-example  width  256  height  177  poster  image jpg  gt   lt source src  video video mp4  type  video mp4  gt  lt  source gt   lt source src  video video ogg  type  video ogg  gt  lt  source gt  This browser does not support HTML5  lt  video gt    Only when the  mp4 is on top and the videofile is not to big

User · Answer

I ve just done some experimentation with this  and from what I can tell you need three things    You must not use the type attribute when calling the video  You must manually call video play   The video must be encoded to some quite strict parameters  using the iPhone setting on Handbrake with the  Web Optimized  button checked usually does the trick    Have a look at the demo on this page  http   broken-links com tests video   This works  AFAIK  in all video-enabled desktop browsers  iPhone and Android   Here s the markup    lt video id  video  autobuffer height  240  width  360  gt   lt source src  BigBuck m4v  gt   lt source src  BigBuck webm  type  video webm  gt   lt source src  BigBuck theora ogv  type  video ogg  gt   lt  video gt    And I have this in the JS   var video   document getElementById  video    video addEventListener  click  function      video play      false     I tested this on a Samsung Galaxy S and it works fine

User · Answer

I tried using the  mp4 format to play a video on Android devices but that did not go well  So after some trial and error  I converted the video into the  webm format and following code with no extra javascript or JQuery   lt video id  quot video quot  class  quot video quot  muted loop autoplay gt       lt source src  quot    media some video webm quot  type  quot video webm quot  gt      Sorry  your browser doesn t support embedded videos   lt  video gt   It worked on an older Android device  at least a few years old as of 2020

User · Answer

Here I include how a friend of mine solved the problem of displaying videos in HTML in Nexus One   I never was able to make the video play inline  Actually many people on the internet mention explicitly that inline video play in HTML is supported since Honeycomb  and we were fighting with Froyo and Gingerbread    Also for smaller phones I think that playing full screen is very natural - otherwise not so much is visible  So the goal was to make the video open in full screen  However  the proposed solutions in this thread did not work for us - clicking on the element triggered nothing  Furthermore the video controls were shown  but no poster was displayed so the user experience was even weirder  So what he did was the following   Expose native code to the HTML to be callable via javascript   JavaScriptInterface jsInterface   new JavaScriptInterface this   webView getSettings   setJavaScriptEnabled true   webView addJavascriptInterface jsInterface   JSInterface      The code itself  had a function that called native activity to play the video   public class JavaScriptInterface       private Activity activity       public JavaScriptInterface Activity activiy            this activity   activiy             public void startVideo String videoAddress           Intent intent   new Intent Intent ACTION VIEW           intent setDataAndType Uri parse videoAddress    video 3gpp       The Mime type can actually be determined from the file         activity startActivity intent             Then in the HTML itself he kept on failing make the video tag work playing the video  Thus  finally he decided to overwrite the onclick event of the video  making it do the actual play  This almost worked for him - except for no poster was displayed  Here comes the most weird part - he kept on receiving ERROR AndroidRuntime 7391   java lang RuntimeException  Null or empty value for header  Host  every time he set the poster attribute of the tag  Finally he found the issue  which was very weird - it turned out that he had kept the source subtag in the video tag  but never used it  And weird enough exactly this was causing the problem  Now see his definition of the video section    lt video width  320  height  240  controls  controls  poster  poster gif   onclick  playVideo  file    sdcard test 3gp      gt     Your browser does not support the video tag   lt  video gt    Of course you need to also add the definition of the javascript function in the head of the page    lt script gt    function playVideo video       window JSInterface startVideo video        lt  script gt    I realize this is not purely HTML solution  but is the best we were able to do for Nexus One type of phone  All credits for this solution go to Dimitar Zlatkov Dimitrov

User · Answer

HTML5 is supported on both Google  android  phones such as Galaxy S  and iPhone  iPhone however doesn t support Flash  which Google phones do support

User · Answer

This might not exactly answer your question  but we re using the 3GP or 3GP2 file format  Better even to use the rtsp protocol  but the Android browser will also recognize the 3GP file format   You can use something like  self location   URL OF YOUR 3GP FILE   to trigger the video player  The file will be streamed and after playback ends  handling is returned to the browser    For me this solves a lot of problems with current video tag implementation on android devices

[android] HTML5 <video> element on Android

Examples related to android

Examples related to video

Examples related to mobile

Examples related to html