2012-01-27 47 views
13

これは、最新の埋め込み形式(iframe)を使用してYouTubeビュー内でYouTube動画を読み込むことについてです。 iframeの埋め込み形式のAndroid webviewはiframe経由で埋め込まれたyoutubeビデオをレンダリングできません

<iframe width="637" height="358" src="http://www.youtube.com/embed/olC42gO-Ln4?fs=1&amp;feature=oembed" frameborder="0" allowfullscreen=""></iframe> 

テスト3.2 & 2.3.3 Androidデバイス(HTC欲望& Asusの変圧器)上のコード、WebViewのは、黒の四角形を示すであろう。

私はビデオが3.2で正しく
を果たし、2.3でVimeoの

<iframe src="http://player.vimeo.com/video/35693267" width="640" height="360" frameborder="0"></iframe> 

から同様の埋め込みを試みたが、黒い四角形は、iframeの領域は空白で、フラッシュと消失しました。

最後に、オブジェクトタグを使用した古い埋め込み形式を使用すると、ビデオは2.3.3 & 3.2のwebview内に正しく表示されます。

私は関連の質問をチェックし、両方の2.3 & 3.2デバイスでアプリケーションおよび/または活性タグまだビデオなしで

android:hardwareAccelerated="true" 

を追加しました。

これは大きな問題です。最新のフォーマット(iframe)を使用しているYouTubeサイトが増えています。 Android/Youtubeチーム、この問題を見てください。

+0

実際にこの問題が解決されたので、この回答が必要です。https://stackoverflow.com/a/24592012/2371425 – Sakiboy

答えて

11

Androidブラウザでは、動画の再生と埋め込みにはまったくバグがあります。単にデバイス間で動作しません。それを働かそうとするのはあなたの時間を無駄にするだけです。私はあなたがを含めることを試みるのではなく、単にYouTubeページまたはh264ファイルに直接リンクするビデオのサムネイルを提供することをお勧めします。

これまでの説明と、可能な解決策を示します。

Google Reader-esque optimizing of WebViews on Android

+0

あなたは正しいです。私はさらに、ビデオが再生されているときにデバイスを回転させると、アプリがすべて乱れることに気付きました。私はサムネイル&リンクソリューションを使用して終了しました。 – littlestove

+0

youtubeまたはvimeo h264ファイルへのリンクがどのように決定されますか? – cottonBallPaws

+0

下記の私の答えをチェックしてください。私の答えは問題を解決し、本当に簡単です。 – Sakiboy

0

私は...ユーザーの環境を検出するだけでiOSデバイス(iPhone、iPodの、アプリ)のためのiframeコードを使用し、皆のために古いコードを使用するようにいくつかのコードを使用してお勧めします。

3

HTML5ビデオのサポート

アプリケーション内のインラインHTML5ビデオをサポートするために、あなたはハードウェアアクセラレーションを持っている必要がありオン、およびはWebChromeClientを設定します。

http://developer.android.com/reference/android/webkit/WebView.html

あなたのWebViewあなたがベースURLとデータをロードする必要がある内の動画を再生したい場合は

7

を(それが誰かを助けるホープ)!

DONTは、次の操作を行います。

mContentWebView.loadDataWithBaseURL(null, webViewContentString, 
      "text/html", "UTF-8", null); 

ではなくを次の操作を行います。

//veryVeryVery important for playing the videos! 
    mContentWebView.loadDataWithBaseURL(theBaseUrl, webViewConentString, 
      "text/html", "UTF-8", null); 

ベースのURLは、あなたの中に表示されているものの "元" のURLのようなものになりますWebView。あなたがニュースリーダーを作っているとしましょう、WebView'sベースURLは元のストーリーのURLになります。

Good Luck!

また、あなたのWebViewを設定することを忘れない...ようなので...あなたは、ハードウェアアクセラレーションを持っている必要があり

mContentWebView.setWebChromeClient(new WebChromeClient()); 
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON); 
    mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND); 
    mContentWebView.setWebViewClient(new WebViewClient()); 
    mContentWebView.getSettings().setJavaScriptEnabled(true); 

は、(上記のSDK 14とでのみ利用可能)マニフェストで点灯。

Ex。オンハードウェアアクセラレーション:

<application 
    android:name="com.example.app" 
    android:icon="@drawable/ic_launcher" 
    android:label="@string/app_name" 
    android:theme="@style/AppTheme" 
    android:hardwareAccelerated="true"> 
<!-- hardwareAccelerated requires SDK 14 --> 
... 
</application> 
+1

loadDataWithBaseURL(...)を避け、nullのベースURLが私のために働いていました。ありがとう! – IK828

+0

これを理解する日にちがありました!私はそれが決してうまくいかないと思った! – Sakiboy

0

このコードは

webView.setInitialScale(1); 
    webView.setWebChromeClient(new WebChromeClient()); 

    webView.getSettings().setAllowFileAccess(true); 
    webView.getSettings().setPluginState(WebSettings.PluginState.ON); 
    webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND); 
    webView.setWebViewClient(new WebViewClient()); 
    webView.getSettings().setJavaScriptEnabled(true); 
    webView.getSettings().setLoadWithOverviewMode(true); 
    webView.getSettings().setUseWideViewPort(true); 
    DisplayMetrics displaymetrics = new DisplayMetrics(); 
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics); 
    int height = displaymetrics.heightPixels; 
    int width = displaymetrics.widthPixels; 

    Log.e(SimpleBillsConstants.SIMPLE_BILLS, width + "-" + height); 

    String data_html = "<!DOCTYPE html><html> <head> <meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"target-densitydpi=high-dpi\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio:1.5)\" href=\"hdpi.css\" /></head> <body style=\"background:black;margin:0 0 0 0; padding:0 0 0 0;\"> <iframe style=\"background:black;\" width=' "+width+"' height='"+height+"' src=\""+ VIDEO_URL+"\" frameborder=\"0\"></iframe> </body> </html> "; 



    webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null); 
0

異なるデバイスに正確にフィット作らこれはME-コードのために働いていたユーチューブのサイトを開き、WebViewの内部でそのビデオを再生することができます。

mWebView = (WebView) findViewById(R.id.webview);  

WebSettings webSettings = mWebView.getSettings(); 
webSettings.setJavaScriptEnabled(true); 


String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>"; 

mWebView.loadData(frameVideo, "text/html", "utf-8"); 

mWebView.loadUrl("http://www.youtube.com/"); 

mWebView.setWebViewClient(new WebViewClient()); 
関連する問題