在Android WebView中集中對齊Youtube剪輯的問題

我試圖在Android中以Web視圖的大小顯示嵌入在WebView中的YouTube剪輯，其大小爲640x360 dip，並位於平板電腦屏幕的中心。我已經成功地做到這一點，但是YouTube視頻似乎被切斷，白色背景被顯示在下面的截圖：在Android WebView中集中對齊Youtube剪輯的問題

screenshot

下面是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(); 
    } 
}

這裏是佈局的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>

編輯：關於這個奇怪的是，在7英寸平板電腦採用Android 3.2，它工作正常，但是在帶有4.0.3（ICS）的10英寸平板電腦，它看起來像在屏幕截圖中。與Honeycomb 3.1一起使用的10英寸平板電腦上的問題。這使我相信，在Web視圖本身內存在導致此行爲的某種設置/問題。

編輯2：在嘗試各種想法來解決問題時，我們注意到剪輯右側的白色矩形似乎與您添加到Web視圖的左邊距的數量直接相關。例如，如果我們放棄將視圖居中並添加100dip邊距，我們會在剪輯右側獲得大約100dip寬的白色條。

歡迎任何建議。

感謝，

米哈伊

來源

2012-05-03 r1k0

你試過設置：layout_width =「wrap_content」？ –

是的，我試過了，但是我得到了2個白色的水平矩形到達屏幕邊緣的剪輯的左側和右側，我不希望這樣。 – r1k0

這個職位是有點老了，但如果你還在尋找一個解決方案：

在ICS網頁視圖是非常錯誤，你的問題是一樣的在帶有左邊距的WebView中使用谷歌地圖。

要解決此問題，在清單中，我改變

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

通過

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

這使得不激活ICS的新功能和解決的問題

乾杯

來源

2012-06-28 14:48:30 bmoreau

的確，在ICS中似乎有一個WebView的bug（證實在今年的Google I/O上），它似乎也在Jelly Bean中被修復。感謝您的回答，我會嘗試一下，但是我們需要在我們的應用中支持更新的API，所以這個限制可能對我們不適用。 – r1k0

我測試過這個，顯然它不能解決問題... – r1k0

在Android WebView中集中對齊Youtube剪輯的問題

回答

相關問題