How to play a video in a webview with android?

I loaded a local html in sdcard, and in this html I used tag :

<video id="myvideo" controls width="120" height="60" poster="img/img01.jpg" src="video/01.mp4"></video>

and then I found that I didn't loaded this html, when I disabled the tag:, the html was working fine, and I tested this in my android avd(2.2) ?

First of all care the encoding. Here it's an article with a working example and some guidelines to encode videos for Android webkit.

And then... when I had to face this issue, I had to research a bit and found some useful answers. Basically you have to open the video the way the native browser does

public class InredisChromeClient extends WebChromeClient implements OnCompletionListener, OnErrorListener {
    private InterfazWebInredis interfazWeb; // Use Your WebView instance instead

    private VideoView mCustomVideoView;

    private LinearLayout mContentView;
    private FrameLayout mCustomViewContainer;
    private WebChromeClient.CustomViewCallback mCustomViewCallback;
    private LinearLayout mErrorConsoleContainer;
    static final FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
            ViewGroup.LayoutParams.FILL_PARENT,
            ViewGroup.LayoutParams.FILL_PARENT, Gravity.CENTER);

    public InredisChromeClient(InterfazWebInredis iwi) {
        super();
        this.interfazWeb = iwi;
    }

    public void onShowCustomView(View view, CustomViewCallback callback) {
        // super.onShowCustomView(view, callback);
        if (view instanceof FrameLayout) {
            mCustomViewContainer = (FrameLayout) view;
            mCustomViewCallback = callback;
            mContentView = (LinearLayout) interfazWeb.findViewById(R.id.mainContainer);
            if (mCustomViewContainer.getFocusedChild() instanceof VideoView) {
                mCustomVideoView = (VideoView) mCustomViewContainer.getFocusedChild();
                // frame.removeView(video);
                mContentView.setVisibility(View.GONE);
                mCustomViewContainer.setVisibility(View.VISIBLE);
                interfazWeb.setContentView(mCustomViewContainer);
                mCustomVideoView.setOnCompletionListener(this);
                mCustomVideoView.setOnErrorListener(this);
                mCustomVideoView.start();
            }
        }
    }

    public void onHideCustomView() {
        if (mCustomVideoView == null)
            return;
        // Hide the custom view.
        mCustomVideoView.setVisibility(View.GONE);
        // Remove the custom view from its container.
        mCustomViewContainer.removeView(mCustomVideoView);
        mCustomVideoView = null;
        mCustomViewContainer.setVisibility(View.GONE);
        mCustomViewCallback.onCustomViewHidden();
        // Show the content view.
        mContentView.setVisibility(View.VISIBLE);
    }

    @Override
    public void onCompletion(MediaPlayer mp) {
        mp.stop();
        mCustomViewContainer.setVisibility(View.GONE);
        onHideCustomView();
        interfazWeb.setContentView(mContentView);
    }

    @Override
    public boolean onError(MediaPlayer mp, int what, int extra) {
        interfazWeb.setContentView(R.layout.main);
        return true;
    }
}

So, this code is much inspired on the android project source code of the browser.

And well, the behaviour of this is opening the video full-screen. I don't know if it's possible to play the video in its own frame within the webpage. But this solution did the trick for me, I hope for you too.

Regards

This is supposed to be working in 2.x versions which you're already using. but the doc says that tag will work when browser is fullscreen.

Possibilities are there that your webview will also support it, but it needs to be full screen. Try this out. (I haven't tried this, though)

EDIT: To make the view go fullscreen, you may try this:

requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);