web-dev-qa-db-fra.com

WebView Android avec une vidéo youtube intégrée, le bouton plein écran fige la vidéo

J'ai une vue Web Android qui charge un blog wordpress. Certains articles de blog contiennent des vidéos youtube que je voudrais que l’utilisateur puisse faire en plein écran s’il le souhaite. Le problème est que le bouton plein écran HTML5 ne fait rien quand on clique dessus mais gèle la vue. Des idées?

androidhtml5webviewyoutube
28
wilxjcherokee

C’est quelque chose que j’ai passé la dernière journée à me déchirer les cheveux. Basé sur divers morceaux de code provenant du Web, j'ai réussi à le faire fonctionner.

Tout d'abord, vous devez créer une classe WebChromeClient personnalisée, qui implémente les méthodes onShowCustomView et onHideCustomView.

private class MyWebChromeClient extends WebChromeClient {
    FrameLayout.LayoutParams LayoutParameters = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.MATCH_PARENT);

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        // if a view already exists then immediately terminate the new one
        if (mCustomView != null) {
            callback.onCustomViewHidden();
            return;
        }
        mContentView = (RelativeLayout) findViewById(R.id.activity_main);
        mContentView.setVisibility(View.GONE);
        mCustomViewContainer = new FrameLayout(MainActivity.this);
        mCustomViewContainer.setLayoutParams(LayoutParameters);
        mCustomViewContainer.setBackgroundResource(Android.R.color.black);
        view.setLayoutParams(LayoutParameters);
        mCustomViewContainer.addView(view);
        mCustomView = view;
        mCustomViewCallback = callback;
        mCustomViewContainer.setVisibility(View.VISIBLE);
        setContentView(mCustomViewContainer);
    }

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

Fondamentalement, ce qui se passe ici, c’est que lorsque le bouton plein écran est enfoncé, nous créons une nouvelle vue pour conserver la vidéo et masquer la vue principale. Et ensuite, lorsque le mode plein écran est fermé, nous faisons l'inverse: supprimez la nouvelle vue et affichez la vue d'origine.

Vous devrez également ajouter toutes ces propriétés à votre classe d'activité:

private MyWebChromeClient mWebChromeClient = null;
private View mCustomView;
private RelativeLayout mContentView;
private FrameLayout mCustomViewContainer;
private WebChromeClient.CustomViewCallback mCustomViewCallback;

Et vous voudrez probablement que la vidéo en plein écran se ferme lorsque vous appuyez sur le bouton Précédent:

@Override
public void onBackPressed() {
    if (mCustomViewContainer != null)
        mWebChromeClient.onHideCustomView();
    else if (myWebView.canGoBack())
        myWebView.goBack();
    else
        super.onBackPressed();
}

Ensuite, il vous suffit d'utiliser votre nouvelle classe pour créer votre vue Web:

myWebView = (WebView) findViewById(R.id.webView1);
mWebChromeClient = new WMWebChromeClient();
myWebView.setWebChromeClient(mWebChromeClient);

Cela fonctionne pour moi sur Android 4.x. Pas sûr des versions précédentes car mon application ne les cible pas.

J'ai trouvé ces liens particulièrement utiles: WebView et HTML5 <vidéo> et http://code.google.com/p/html5webview/source/browse/trunk/HTML5WebView/src/org/itri/html5webview/ HTML5WebView.Java

49
Mark Parnell

Vous pouvez démarrer une application YouTube externe lorsque vous souhaitez télécharger les informations sur la vidéo URL s'il n'est pas important d'afficher la vidéo YouTube directement dans l'application.

Pour capturer l'URL de la vidéo, vous devez utiliser la méthode owerride onLoadResource:

new WebViewClient() {

    @Override
    public void onLoadResource(WebView view, String url) {

        if (url.startsWith("http://www.youtube.com/get_video_info?")) {
            try {
                String path = url.replace("http://www.youtube.com/get_video_info?", "");

                String[] parqamValuePairs = path.split("&");

                String videoId = null;

                for (String pair : parqamValuePairs) {
                    if (pair.startsWith("video_id")) {
                        videoId = pair.split("=")[1];
                        break;
                    }
                }

                if(videoId != null){
                    startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.youtube.com"))
                            .setData(Uri.parse("http://www.youtube.com/watch?v=" + videoId)));
                    needRefresh = true;

                    return;
                }
            } catch (Exception ex) {
            }
        } else {
            super.onLoadResource(view, url);
        }
    }
}
0
Roman Black