Android webview 无法渲染通过 iframe 嵌入的 youtube 视频答案

【问题标题】：Android webview cannot render youtube video embedded via iframeAndroid webview 无法渲染通过 iframe 嵌入的 youtube 视频
【发布时间】：2012-02-20 15:02:04
【问题描述】：

这是关于在 web 视图中使用最新的嵌入格式 (iframe) 加载 youtube 视频。

iframe 嵌入格式示例

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

在 Android 2.3.3 & 3.2 设备（HTC Desire & Asus Transformer）上测试代码，webview 只会显示一个黑色矩形。

我尝试了来自 vimeo 的类似嵌入

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

在 2.3 中，视频播放正确
3.2中，一个黑色矩形一闪一闪消失，iframe区域为空白。

最后，如果使用旧的嵌入格式（使用对象标签），视频在 2.3.3 和 3.2 的 webview 中都能正常显示。

我已经检查了相关问题并添加了

android:hardwareAccelerated="true"

在应用程序和/或活动标签中，但在 2.3 和 3.2 设备中仍然没有视频。

这是一个大问题，因为现在越来越多的网站使用最新的格式 (iframe) 来嵌入他们的 youtube 视频。 Android/Youtube团队，请看看这个问题。

【问题讨论】：

你应该这样回答：stackoverflow.com/a/24592012/2371425 因为它实际上解决了问题。

标签： android webview youtube

【解决方案1】：

Android 浏览器在视频播放和嵌入方面完全是错误的。它根本无法跨设备工作。试图让它工作只是浪费你的时间。我的建议是不要尝试包含<iframe>，而只是提供直接链接到 YouTube 页面或 h264 文件的视频缩略图。

之前的讨论，有一个可能的解决方案。

Google Reader-esque optimizing of WebViews on Android

【讨论】：

你是对的。我进一步发现，如果您在播放视频时旋转设备，该应用程序将会一团糟。我最终使用了建议的缩略图和链接解决方案。
如何确定指向 youtube 或 vimeo h264 文件的链接是什么？
在下面查看我的答案。我的回答解决了问题，真的很简单。
感谢您的提醒。最初的问题是三年前，幸运的是，Android 从那时起就向前发展了。

【解决方案2】：

如果您想在WebView 中播放视频，您需要使用基本 URL 加载数据！

不要这样做：

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 类似于您在 WebView 中显示的“原始” URL。因此，假设您正在制作新闻阅读器，WebView's 基本 url 将是原始故事的 url。

祝你好运！

还记得设置你的 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);

您需要在 Manifest 中开启硬件加速（仅适用于 SDK 14 及更高版本）。

例如。硬件加速开启：

<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>

【讨论】：

避免使用 null 基本 url 的 loadDataWithBaseURL(...) 对我有用。谢谢！
我花了好几天才弄明白！我以为它永远行不通！

【解决方案3】：

HTML5 视频支持

为了在您的应用程序中支持内嵌 HTML5 视频，您需要开启硬件加速，并设置 WebChromeClient。

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

（希望对大家有所帮助）

【讨论】：

【解决方案4】：

这对我有用 - 代码打开 youtube 网站并可以在 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());

【讨论】：

【解决方案5】：

我建议使用一些代码来检测用户的环境...仅对 ios 设备（iphone、ipod、ipad）使用 iframe 代码，而对其他所有人使用旧代码。

【讨论】：

【解决方案6】：

此代码完全适合不同的设备

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);

【讨论】：