Intercepting HTML5 video source request in Android WebView

Question

I have an application that displays an HTML5 page with a video element in a WebView. It took me a while to figure out how to make the video work, but finally I was able to play the video embedded in WebView on the Samsung Galaxy Tab (Android 3.1) tab. I used the following code for the video tag:

<video controls poster="img/poster.jpg" height="240" width="360"> <source src="video/BigBuck.m4v"> <source src="video/BigBuck.theora.ogv" type="video/ogg"> <source src="video/BigBuck.webm" type="video/webm"> HTML5 video not supported. </video> 

The video element has several sources, and now I am trying to capture the selected video source (and format) before the video starts playing. When I press the play button, I see an HTTP request for a video file arriving at the web server where the video files are stored, but I can’t intercept this request on the application side.

I looked through several methods to see if a request for a video file passes, but I did not see it pass in any of them.

• In shouldOverrideUrlLoading(WebView view, String url) in my WebViewClient only the initial HTML5 page request is executed.
• In shouldInterceptRequest (WebView view, String url) in my WebViewClient I see only the transmission of the initial request of the HTML5 page and the request for the image of the video poster, but not for the video file.
• onShowCustomView(View view, CustomViewCallback callback) in my WebChromeClient is only called when I click the full-screen control button on the HTML5 page, when the video is already playing, but not when I click the play button. (Actually the purpose of this method?)

Does anyone have a suggestion for another method where I can capture a request for a video file or can someone explain to me what actually happens when I click the play button on a video element?

Answer 1

I solved the problem using javascript approach. When the HTML page loads, the loadedmetadata event fires when the video metadata is loaded. From now on, you can get the selected video source from the currentSrc attribute of the currentSrc element and transfer it via JavascriptInterface to your own Android code.

Below is the HTML5 video element code. "Android" is the name by which the JavascriptInterface can be obtained in javascript.

 <video poster="image/poster.jpg" height="240" width="360" onloadedmetadata="Android.interceptPlay(this.currentSrc);"> <source src="video/BigBuck.m4v"> <source src="video/BigBuck.webm" type="video/webm"> <source src="video/BigBuck.theora.ogv" type="video/ogg"> HTML5 video not supported. </video> 

JavascriptInterface Code

 private class JavaScriptInterface { Context mContext; /* Instantiate the interface and set the context */ JavaScriptInterface(Context c) { mContext = c; } public void interceptPlay(String source) { // do something } } 

Lastly, add a JavascriptInterface to your WebView during action creation

 mWebView.addJavascriptInterface(new JavaScriptInterface(this), "Android"); 

It is important to catch the loadedmetadata event by adding the onloadedmetadata attribute to the HTML5 video element, rather than registering an event listener when the page loads through addEventListener("loadedmetadata",...) , because in a fast network, the loadedmetadata event can be (see http: // dev.opera.com/articles/view/consistent-event-firing-with-html5-video )