Thursday, January 17, 2013

WebView + Video Tag (HTML5) + Play click doesn't show video

New day with new challange

I am having device Samsung Galexy Y Android version 2.3. While running my program suddenly I was bit surprised. I had a video tag in my web page which was being shown in the WebView in my application but when I click on the play button, video play didn't start. I said whatttttttttttt is that :-o :-o
When I run this in the phone's browser it opens up a video player application with the URL whichever was mentioned in the video tag. I started investigating and soon found that the WebView of android 2.3 doesn't support all HTML5 tags and only few HTML5 tags are supported with limitations.
Since I had to make video stuff working so I started looking into. I found that while using the native browser when I click on play button on the video shown on web page some "play" log is coming in the LogCat (By native web browser). I thought if some how I become able to trap the play button click event with the video URL then I'll launch the player by myself instead of being dependent on the WebView. I did a trick to solve this problem.

First of all I injected a script interface in the web page like below.
protected void onCreate(Bundle savedInstanceState) {
   ...
   webView.addJavascriptInterface(new VideoURLRetriever(), "FORM_VIDEO_GETTER");
   ...
}
private class VideoURLRetriever {
        
    public void play(String path) {
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setDataAndType(Uri.parse(path), "video/*");
        startActivity(intent);
    }
}

This will be called by javascript engine whenever I want. And now time to inject a specific javascript in the page when page loading is done like below.
private class MyWebViewClient extends WebViewClient {

    @Override
    public void onPageFinished(WebView view, String url) {
    final String JS = "javascript: " + 
                      "var video = document.getElementsByTagName(\"video\")[0];"+
                      "if (video == undefined);" + 
                      "else video.addEventListener('play', playHandle,false);" + 
                      " function playHandle() {javascript:window.FORM_VIDEO_GETTER.play(video.currentSrc);video.pause();}" +
        Log.v("Injecting script for video play");
        view.loadUrl(JS);
    }
}

As above javascrpt describs, it first find's the first video element in the page, registers the play click handler as javascript function and which is captured by the java code in your java class like VideoURLRetriever.play(url). You can add more events and can handle it in your code like above.

Well, I know this is not the ethical way to achieve what I wanted but found this solution as the only way to have my video playing :-; . Also a demerit of using above code is that, each time any page is loaded, a javascript is injected in your page. But that's not important as you want your video to be playing :-)

Cheers!!!

No comments:

Post a Comment