Android webview 无法渲染通过 iframe 嵌入的 youtube 视频
Posted
技术标签:
【中文标题】Android webview 无法渲染通过 iframe 嵌入的 youtube 视频【英文标题】：Android webview cannot render youtube video embedded via iframe 【发布时间】：2012-02-20 15:02:04 【问题描述】：这是关于在 web 视图中使用最新的嵌入格式 (iframe) 加载 youtube 视频。
iframe 嵌入格式示例
<iframe src="http://www.youtube.com/embed/olC42gO-Ln4?fs=1&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" 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团队，请看看这个问题。
【问题讨论】：
你应该这样回答：***.com/a/24592012/2371425 因为它实际上解决了问题。 【参考方案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);
【讨论】：
以上是关于Android webview 无法渲染通过 iframe 嵌入的 youtube 视频的主要内容，如果未能解决你的问题，请参考以下文章