You can create Frame layout above your WebView and attach to it VideoView. This way you can manage size, add custom MediaControls but there are a lot of work and you will faced with many problems.
Edit: You can capture event by:
if you can handle html, you can add JS method, that calls your application method throught the JS bridge. As example you put an image with onclick
event. Click by this image calls JsVideFrameCallbackImpl.playVideo('videoUrl')
in your app (http://android-developers.blogspot.com/2008/09/using-webviews.html):
<img src="img/video_1.jpg" width="494px" height="340px" onclick="javascript: JsVideFrameCallbackImpl.playVideo('videoUrl')">
and attach addJavascriptInterface
in your activity to webview:
wv.addJavascriptInterface(new JsVideFrameCallbackImpl(), "JsVideFrameCallbackImpl");
//....
private final class JsVideFrameCallbackImpl {
private final static String LOG_TAG = "JsVideFrameCallbackImpl";
@SuppressWarnings("unused")
@JavascriptInterface
public void playVideo(final String videoUri) {
// call VideoPlayer activity as example
startActivity(new Intent(context, VideoPlayer.class));
}
}
or you can get the coords of any html element on the page via the same js-bridge and place VideoView
on FrameLayout
(Do not forget enable js in webview wv.getSettings().setJavaScriptEnabled(true); before using javascript in webview
):
wv.loadUrl("javascript: jsInitMedia()"); // call js method jsInitMedia
jsInitMedia in the html (or you can apply this code directly in WebView as: wv.loadUrl("javascript: var el = document.getElemen...")
:
function jsInitMedia() {
var el = document.getElementById(dataArray[i]); var coords = el.getBoundingClientRect();
// get top, left coords, width and height with coords.width, el.offsetTop and so on. Send them back as string (i use json format)
JsVideFrameCallbackImpl.init(jsonDataWithCoordsAsString);
}
and in your java code in JsVideFrameCallbackImpl
:
@JavascriptInterface
public void init(final String json) {
Log.d(LOG_TAG, "Init:" + json);
// parse json and extract left, top, width and height
// now you can place any View with corresponding coords on your frame
//as well you can easy handle all click events
}