Seeking forward in YouTube HTML5 video over Android WebView

30
votes

EDIT Nevermind, YouTube released the Native Android API (https://developers.google.com/youtube/android/player/)

I have an application that shows an HTML5 videoview over a WebView. This video is forced to be HTML5 from YouTube service (http://www.youtube.com/embed/3FFyT039tJ0?autoplay=1&rel=0&showinfo=0&html5=1&start=90&end=176 )

As you can see in the URL, the parameter "start" shows the number of seconds the video must start playing at. I have been using the method onShowCustomView of WebChromeClient to obtain the VideoView object created by the WebView, as seen here.

When I have the reference to the VideoView, I can use the method seekTo() to accomplish my goal. Till here everything is fine, but only for Android versions lower than 4.x.

As many of you know, the method onShowCustomView of WebViewChromeClient, from 4.x and forward, is only called when user clicks on "FullScreen" mode, but not when the video starts playing (how used to be before 4.x).

So, the point is that I can't seek 90 seconds forward because I can't obtain the reference to the VideoView, and I can't find any workaround.

3
androidhtmlvideoyoutube
Perhaps you could get a reference to the Video object from the view parameter in WebChromeClient#onProgressChanged(WebView view, int newProgress) when newProgress == 100?I haven't tried this so I post it as a comment. – onosendai
@GunnarKarlsson I will check, thanks! – manelizzard
Have a look into MediaelementJS (mediaelementjs.com). I use this library in my quirli media player (quir.li) for various media formats, including Youtube videos. See the Youtube Example. – Marcel

3 Answers

1
votes

For future viewers

YouTube now has a player API: https://developers.google.com/youtube/android/player/

Where you can easily place a view in the xml and handle it in activity, here are the examples: https://github.com/youtube/yt-android-player

0
votes

If anybody wants to use WebView yet to play youtube videos, two considerations:

  1. Depending on Android version, it can't be possible. Android version 4.x through WebView can't do that (or i didn't find the way :) As I posted here
  2. If you are in Android 5 or upper, you have to set the WebChromeClient to the WebView component: setWebChromeClient(new WebChromeClient());

Hope it helps!

0
votes

Try This One:

    wv.getSettings().setPluginsEnabled(true);
    DisplayMetrics metrics = new DisplayMetrics();
    getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int w1 = (int) (metrics.widthPixels / metrics.density), h1 = w1 * 3 / 5;                
    String item="http://www.youtube.com/embed/3FFyT039tJ0";
    wv.getSettings().setJavaScriptEnabled(true);
    wv.setWebChromeClient(chromeClient);
    wv.getSettings().setPluginsEnabled(true);

    try {
        wv.loadData(
                "<html><body><iframe class=\"youtube-player\" type=\"text/html5\" width=\""
                        + (w1 - 20)
                        + "\" height=\""
                        + h1
                        + "\" src=\""
                        + item
                        + "\" frameborder=\"0\"\"allowfullscreen\"></iframe></body></html>",
                "text/html5", "utf-8");
    } catch (Exception e) {
        // TODO: handle exception
        e.printStackTrace();
    }

}

And write a webchrome client like this:

private WebChromeClient chromeClient = new WebChromeClient() {

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {

        super.onShowCustomView(view, callback);
        if (view instanceof FrameLayout) {
            FrameLayout frame = (FrameLayout) view;
            if (frame.getFocusedChild() instanceof VideoView) {
                VideoView video = (VideoView) frame.getFocusedChild();
                frame.removeView(video);
                video.start();
            }
        }

    }
};