Android webview html5 video autoplay not working on android 4.0.3

Question

I have developed an application where the user can set videos on a web page: - They can specify a Youtube URL OR - They can upload a video

Depending on which option the user chooses i render a video page like this : If a video is from youtube:

<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/YOUTUBEID?autoplay=1&loop=1&autohide=1&fs=0"  frameborder="0"></iframe>

If the video is being uploaded:

<video id="video" style="cursor: pointer;" width="640" height="480"  autoplay controls loop>
  <source src="../video/Tareas_Diarias_Resumen.mp4" type="video/mp4" />
</video>

OK. All this works perfect on Google Chrome, but the fact is that the video is going to be watched on 16 Samsung GT-P5100 Android 4.03 Tablets.

We created an Android application which embeds an webView like that:

WebView engine = (WebView) findViewById(R.id.web_engine);
engine.setWebChromeClient(new WebChromeClient());
engine.getSettings().setPluginsEnabled(true);
engine.getSettings().setPluginState(PluginState.ON);
engine.getSettings().setJavaScriptEnabled(true);
engine.getSettings().setAllowFileAccess(true);
engine.loadUrl(miUrl);

And here I have two issues: 1- Youtube video. It works ok, I can see the video but with no autoplay, and we want it to work with autoplay. Any solution? 2- The uploaded video does not work, I can see the player but no video.

The video was converted with handbrake, choosing iphone & ipod-touch preset and "Web Optimized" option.

Any help or clue? Thanks in advance

Answer 1

Auto-play is disabled since Android SDK 17, but you can set setMediaPlaybackRequiresUserGesture to false to re-enable auto-play. Don't forget to check the SDK version because there is not such function in earlier versions.

    int SDK_INT = android.os.Build.VERSION.SDK_INT;
    if (SDK_INT > 16) {
        engine.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }

Answer 2

[upgraded to answer per request]

Autoplay on most mobile platforms (Android, iOS) gets blocked to avoid poor user experiences - video should only play following a user action. You can usually work around it by triggering the play() on another event (eg the onloaded event)

Answer 3

For Android 4.0.x, try triggering the event : loadstart

var vid=document.getElementById('video');
vid.addEventListener("loadstart", showVideo, false);
function showVideo(e) {
  vid.play();
}