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!

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!

• javascript
• android
• html
• video

Share Improve this question Follow edited Dec 10, 2012 at 16:33 Eric R. asked Dec 10, 2012 at 16:19 Eric R.Eric R. 98311 gold badge1010 silver badges1919 bronze badges 1

• Could you please confirm one of the answers ore start a bounty. Thank you. – Milos Cuculovic Commented Dec 18, 2012 at 13:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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 remanded). In which concerns your phone, the possibly reason why it is not working is that yu are using a non supported video codec.

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).