webview html5 video,Android WebView html5 video force fullscreen

I have been working on this issue for at least one week. I have read all the post about it in StackOverflow but I still not founding the solution and I am starting to think that this is impossible.

I want to display an HTML in a webview embebbed in a layout like this:

The problem is that if that HTML code has an HTML5 video inside it will be cropped due to a bug in Android OS: Link to bug.

I have tried many workarounds but none of them seems to be working. My last attempt is to show the video on fullscreen for devices lower than Jelly Bean (they have fixed the error for this version).

I do not have any control on the HTML I have to display, so the only way I found to do something is injecting javascript code. Right now, I am handling both onShowCustomView to make it fullscreen.

setWebViewClient(new WebViewClient() {

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

if (android_sdk < JELLY_BEAN) {

detectVideoOnWebPage();

}

}

});

private void detectVideoOnWebPage() {

// Run javascript code that detects the video end and notifies the

// interface

String js = "javascript:";

js += "_ytrp_html5_video = document.getElementsByTagName('VIDEO')[0];";

js += "if (_ytrp_html5_video !== undefined) {";

{

js += "_ytrp_html5_video.webkitEnterFullScreen();";

js += "_VideoEnabledWebView.notifyVideoPresence();";

js += "function video_start_playing() {";

{

js += "_VideoPlayed.notifyVideoStarted();";

js += "ev.target.removeEventListener('playing', video_start_playing);";

}

js += "}";

js += "ev.target.addEventListener('playing', video_start);";

}

js += "} else if (document.getElementsByTagName('iframe')) {";

{

js += "_VideoEnabledWebView.notifyVideoPresence();";

}

js += "} else {";

{

js += "var handler = function(ev) {";

{

js += "if (ev.target.nodeName.toUpperCase() === \"VIDEO\".toUpperCase()) {";

{

js += "function video_start_playing() {";

{

js += "_VideoPlayed.notifyVideoStarted();";

js += "ev.target.webkitEnterFullScreen();";

}

js += "}";

js += "ev.target.addEventListener('play', video_start_playing);";

js += "_VideoDetected.notifyVideoPresence();";

js += "document.removeEventListener (\"DOMNodeInserted\", handler);";

}

js += "} else {";

{

js += "_ytrp_html5_video = document.getElementsByTagName('VIDEO')[0];";

js += "if (_ytrp_html5_video !== undefined) {";

{

js += "_VideoEnabledWebView.notifyVideoPresence();";

}

}

js += "};";

}

js += "};";

js += "document.addEventListener (\"DOMNodeInserted\", handler);";

}

js += "}";

loadUrl(js);

}

My goal is:

Detect when html contains an html5 video.

For OS versions lower than Jelly Bean, force fullscreen.

Right now, I have reached:

Display in fullscreen mode for html5 videos that are not inside an iframe for versions lower than Ice Cream Sandwich (ICS ignore the webkitEnterFullScreen)