How to play a video in a webview with android?

Question

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) ?

Solution 1

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

Solution 2

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);

Comments

[jin]

thank you! but how to make the browser fullscreen? and Now the html page I have loaded is too big and I　have to control it using scrollbar when I want to see all the page, and how to autosize the loading htnl page into my webview and make the webview fullscreen?

[Nurbol]

How do you setContentView on your WebView object? I think I'm missing something

[mdelolmo]

@powerj1984 By default, when you click on a video link, the WebView tries to open it in a new window, so the platform does it for you. I don't know if they have changed this behaviour, that is how ir worked in FroYo.

[newman]

Did anybody make it work based on this answer? It doesn't work for me. By the way, I couldn't find the message about the fullscreen in the linked doc either.

[Aman Alam]

It says like <video> tag support in fullscreen mode down there where 'Browser' capabilities are discussed

[FuegoFingers]

I know this is old but I don't really get the setContentView call either. setContentView is not a function of WebView or it's parents. Did you implement this yourself? Would it be possible for you to provide the full source for this project? I would really appreciate it.

[mdelolmo]

@FuegoFingers, the field interfazWeb is an instance of InterfazWebInredis, which extends Activity.

[Swap-IOS-Android]

I am new to android development and i want to play locally store video on locally store html (asset folder) on android web page..but when i click on video on html it wont play..than i see ur code but i dont understand where to use your code

[Petr Peller]

Link to broken-links.com is .. ehm ... broken :) Parse error: syntax error, unexpected $end in /home/clauacom/public_html/wp-includes/version.php on line 35