5

I'm trying to get HTML5 videos to play on mobile devices. They seem to run fine on the latest version of iOS, but I'm getting a lot of inconsistency with Android devices.

I'm using video.js and listening for a click on a thumbnail image, which in return replaces the element with a HTML5 video and plays it automatically. The following code flat out doesn't work on the Android emulator (clicking on a thumbnail does nothing). When I try it on my own Droid Razr, it begins to load the video and then the browser freezes up. This happens in the native browser and Chrome, which tells me it's something native to the device.

$(".video").live("click", function(e) {
    e.preventDefault();
    $(this).replaceWith("<video id='" + $(this).data("video-id") + "' class='video-js' preoload='auto' width='100%' height='100%' poster='" + $(this).data("video-poster-url") + "'><source type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' src='" + $(this).data("video-url")  + "'></video>");

    video  = _V_($(this));
    video.ready(function() {
       this.play();
       this.requestFullScreen();
    });
});

The HTML ends up being:

<video id='fv3530' class='video-js' preoload='auto' width='100%' height='100%' poster='/posters/fv3530.jpg'>
    <source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" src='/videos/fv3530.mp4'>
</video>

Does anybody know why this would cause an Android device to totally freeze up, and what I can do to make videos run consistently on most Android devices?

Thanks!

Eric R.
  • 883
  • 1
  • 9
  • 18

2 Answers2

2

Please se this question: HTML5 <video> element on Android

Apparently, there is a possibility to use HTML5 videos with android, according to http://developer.android.com/about/versions/android-2.0-highlights.html But there are some strict parameteres in order to make this work (see checked response to the question).

In your case, It is not easy to handle events with the emulator, especially html5 etc, so you should allways use a real device for testing (really recommanded). In which concerns your phone, the possibly reason why it is not working is that yu are using a non supported video codec.

Community
  • 1
  • 1
Miloš
  • 17,005
  • 46
  • 137
  • 240
1

Remove the type attribute from the source declaration. This usually causes issues with Android, older versions especially.

Your source declaration should simply be:

<source src='/videos/fv3530.mp4'>

I have a small site which has a working HTML5 video on Android (just tested it on my HTC Desire running Android 2.2).

Ian Devlin
  • 17,608
  • 4
  • 53
  • 69