CODEWITHSUNDEEP
androidioshtmlvideo
Adam McKenna
Adam McKenna

Reputation: 2445

HTML5 Embedded Video not loading on mobile

I have recently embedded an HTML5 using MP4 and Webm on the home page of this website:

http://www.doubleconcentrate.com

It loads and loops automatically on PC and Mac, but on iPhone and Android the video has a play button but simply does not play.

More-so on the iPhone 4, the play button has a line across it.

Any help here?

Thanks

Upvotes: 1

Views: 317

Answers (1)

Mick
Mick

Reputation: 25491

This came up in a similar question just today (MP4 video unable to play on tablet/mobile).

Your question is a little different as you include the page and video itself which makes it easier to check (thanks!).

The first thing to note, as mentioned in the answer to the question above:

... you may not want [a video in a browser] automatically to play on a Mobile device as with some price plans you may be running up data costs for your users - this is a key reason auto play of videos on mobile devices is not historically supported. There are various workaround people have tried but I'm not sure there is one that works universally, and you really need to think about whether you actually want to do this.

Checking the video on an iOS device, it appears it does not want to play even when the user taps the play button. This may be a format issue, one very common example being a mp4 with a codec or profile which the phone does not support (mp4 is a 'container' and it can support different format video streams, not all of which a particular device may support).

If you can provide a direct link to the video itself it should be possible to check this.

If you want to check it yourself then ffprobe ((https://www.ffmpeg.org/ffprobe.html) will provide info on code, framerate, profile etc. For example the following is the output when looking at one of the BigBuckBunny (https://peach.blender.org) videos:

ffprobe version 2.6.1 Copyright (c) 2007-2015 the FFmpeg developers
  built with llvm-gcc 4.2.1 (LLVM build 2336.11.00)
  configuration: --prefix=/Volumes/Ramdisk/sw --enable-gpl --enable-pthreads --enable-version3 --enable-libspeex --enable-libvpx --disable-decoder=libvpx --enable-libmp3lame --enable-libtheora --enable-libvorbis --enable-libx264 --enable-avfilter --enable-libopencore_amrwb --enable-libopencore_amrnb --enable-filters --enable-libgsm --enable-libvidstab --enable-libx265 --disable-doc --arch=x86_64 --enable-runtime-cpudetect
  libavutil      54. 20.100 / 54. 20.100
  libavcodec     56. 26.100 / 56. 26.100
  libavformat    56. 25.101 / 56. 25.101
  libavdevice    56.  4.100 / 56.  4.100
  libavfilter     5. 11.102 /  5. 11.102
  libswscale      3.  1.101 /  3.  1.101
  libswresample   1.  1.100 /  1.  1.100
  libpostproc    53.  3.100 / 53.  3.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '/folder/big_buck_bunny_720p_h264.mov':
  Metadata:
    major_brand     : qt  
    minor_version   : 537199360
    compatible_brands: qt  
    creation_time   : 2008-05-27 18:36:22
    timecode        : 00:00:00:00
  Duration: 00:09:56.46, start: 0.000000, bitrate: 5589 kb/s
    Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1280x720, 5146 kb/s, 24 fps, 24 tbr, 2400 tbn, 4800 tbc (default)
    Metadata:
      creation_time   : 2008-05-27 18:36:22
      handler_name    : Apple Alias Data Handler
      encoder         : H.264
    Stream #0:1(eng): Data: none (tmcd / 0x64636D74) (default)
    Metadata:
      creation_time   : 2008-05-27 18:36:22
      handler_name    : Apple Alias Data Handler
      timecode        : 00:00:00:00
    Stream #0:2(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, 5.1, fltp, 437 kb/s (default)
    Metadata:
      creation_time   : 2008-05-27 18:36:22
      handler_name    : Apple Alias Data Handler

Upvotes: 1

Related Questions