Problemas al alinear un clip de Youtube centralmente en un Android WebView

Estoy tratando de mostrar un clip de YouTube incrustado en un WebView en Android con el tamaño de la vista web tan grande como 640x360 dip y en el centro de la pantalla de una tableta. Me las arreglé para hacer esto, sin embargo, el clip de YouTube parece estar cortado y se muestra un fondo blanco como en la siguiente captura de pantalla:

captura de pantalla

Aquí está el código de Java:

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class VideoWebViewActivity extends Activity {


    private static final int VIDEO_WIDTH = 640; 
    private static final int VIDEO_HEIGHT = 360;
    private WebView webView;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

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

        webView.getSettings().setPluginsEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.setWebChromeClient(new WebChromeClient());

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(final WebView view, final int errorCode, final String description, final String failingUrl) {
            }

            @Override
            public boolean shouldOverrideUrlLoading(final WebView view, final String url) {
                view.loadUrl(url);
                return true;
            }

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

            }

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

            }
        });

        String youtubeUrl = "http://www.youtube.com/embed/O1N2rENXq_Y";

        String embedCode = "<!DOCTYPE html><html><head>" + " <style type=\"text/css\"> body { background-color: transparent; padding:0; margin:0; }</style>"
                        + "</head><body><div align=\"center\"><iframe align=\"middle\" width=\"" + (VIDEO_WIDTH) + "\" height=\""
                        + (VIDEO_HEIGHT) + "\" src=\"" + youtubeUrl
                        + "\" frameborder=\"0\" allowfullscreen></iframe></div></body></html>";


        webView.loadData(embedCode, "text/html", null);
    }

    @Override
    public void onDestroy() {
        if (webView != null) {
            webView.destroy();
        }
        super.onDestroy();
    }
}

Y aquí está el diseño xml:

<?xml version="1.0" encoding="UTF-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/weblink"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:visibility="visible" >


    <WebView
        android:id="@+id/weblink_webview"
        android:layout_width="640dip"
        android:layout_height="wrap_content"
         />

</RelativeLayout>

Editar: Lo más extraño de esto es que en una tableta de 7 pulgadas con Android 3.2 funciona bien, sin embargo, en una tableta de 10 pulgadas con 4.0.3 (ICS) se ve como en la captura de pantalla. El mismo problema en una tableta de 10 pulgadas con Panal 3.1. Esto me lleva a creer que hay algún tipo de configuración/problema dentro de la vista web que causa este comportamiento.

Edición 2: al probar varias ideas para resolver el problema, notamos que el rectángulo blanco sobre el lado derecho del clip parece tener su tamaño en relación directa con la cantidad de margen izquierdo que agrega a la vista web. Por ejemplo, si dejáramos de centrar la vista y añadiéramos un margen de 100 puntos de inmersión, obtendríamos una franja blanca de aproximadamente 100 puntos de inmersión a la derecha del clip.

Cualquier sugerencia es bienvenida.

Gracias,

Mihai

preguntado el 03 de mayo de 12 a las 15:05

¿Has probado a configurar: layout_width="wrap_content" ? -

sí, lo intenté, sin embargo, obtengo 2 rectángulos horizontales blancos a la derecha y a la izquierda del clip que llegan a los bordes de la pantalla y no quiero eso. -

1 Respuestas

Esta publicación es un poco antigua, pero si todavía está buscando una solución:

La vista web en el ICS tiene muchos errores, y su problema es el mismo con un mapa de Google en una vista web con un margen izquierdo.

Para resolver este problema, en el manifiesto, cambié

<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" />

by

<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="11" />

Esto permite no activar las nuevas funciones de ICS y solucionar el problema

¡Salud

Respondido el 28 de junio de 12 a las 15:06

De hecho, parece haber un error con WebView (confirmado en Google I/O este año) en ICS, y también parece estar solucionado en Jelly Bean. Gracias por la respuesta, voy a probarlo, sin embargo, necesitaremos admitir API más nuevas en nuestra aplicación, por lo que es posible que esta limitación no funcione para nosotros. - r1k0

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.