Playing Flash FLV Videos in Android applications

Often when you create an app displaying web contents in a mobile device you have to deal with FLV videos, still widely used in the web (until HTML5 will rule the world). The best thing to do is to convert them with some converter (like ffmpeg), but if you don'have access to original videos or for some other reasons you can't do the conversion in some other suitable format, here you can find a quick tutorial on how to embed and play Flash FLV Videos in an Android application.

This is done by using a WebView, a SWF player capable of playing FLVs, and of course the Flash plugin for Android installed.

First, create a layout xml with a WebView, like this:

<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">

	<WebView android:layout_width="fill_parent" android:id="@+id/webview" android:layout_height="fill_parent"></WebView>	</LinearLayout>

then, create the Activity class, here is an extract:

package it.synesthesia.flvplayer;

import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.net.URLEncoder;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;

public class ViewVideo extends Activity {

	WebView webView;
	String htmlPre = "";  
	String htmlCode = 
			" " +
			"";
	String htmlPost = "";

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.view_video); 

		webView = (WebView)findViewById(R.id.webview);

		webView.getSettings().setJavaScriptEnabled(true);
		webView.getSettings().setAllowFileAccess(true);
		webView.getSettings().setPluginsEnabled(true);
		webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY); //thanks Patrick!

		htmlCode = htmlCode.replaceAll("@VIDEO@", video_link);
		webView.loadDataWithBaseURL("fake://fake/fake", htmlPre+htmlCode+htmlPost, "text/html", "UTF-8", null);  
	}


    @Override
    protected void onPause(){
        super.onPause();

        callHiddenWebViewMethod("onPause");

        webView.pauseTimers();
        if(isFinishing()){
        	webView.loadUrl("about:blank");
            setContentView(new FrameLayout(this));
        }
    }

    @Override
    protected void onResume(){
        super.onResume();

        callHiddenWebViewMethod("onResume");

        webView.resumeTimers();
    }

    private void callHiddenWebViewMethod(String name){
    	// credits: http://stackoverflow.com/questions/3431351/how-do-i-pause-flash-content-in-an-android-webview-when-my-activity-isnt-visible
        if( webView != null ){
            try {
                Method method = WebView.class.getMethod(name);
                method.invoke(webView);
            } catch (NoSuchMethodException e) {
                Lo.g("No such method: " + name + e);
            } catch (IllegalAccessException e) {
                Lo.g("Illegal Access: " + name + e);
            } catch (InvocationTargetException e) {
                Lo.g("Invocation Target Exception: " + name + e);
            }
        }
    }

}

Some explanation:

[list]
[*] as said, you need a FLV player. I used the great & free FLVPlayer http://www.platipus.nl/flvplayer/download/1.0/

[*] FLV player must reside on a website on the net. I tried putting the .swf in the /assets folder of the app and calling it from there, but it failed to load the FLV video. if someone can fix this please let me know!

htmlCode contains the code to show the video as "fullscreen" (filling to full size of the webview). I could not get rid of a small white row some pixel wide, that I suppose is the space for the webview scrollbar. If you found workaround for this, again, please let me know so I can update the tutorial thanks to Patrick van Coeverden for the fix suggestion - see [url=http://stackoverflow.com/questions/2279978/webview-showing-white-bar-on-right-side]http://stackoverflow.com/questions/2279978/webview-showing-white-bar-on-right-side[/url]

[*] callHiddenWebViewMethod is very important, otherwise the video will continue playing when the activity is not visible any more (and audio as well). Credis to this goes to the sliseshare poster linked in the comment. Thanks!

[*] WARNING: this is mostly an hack! beware, things could not work as expected, or can stop working in the future. Btw, it worked very well for me.

[*] Have fun and let me know if you use this code! Francesco Ronchi (francesco [dot] ronchi [at] synesthesia [dot] it)

[/list]