将 Youtube 视频嵌入到 WebView（Appcelerator）不显示（黑屏）
Posted
技术标签:
【中文标题】将 Youtube 视频嵌入到 WebView（Appcelerator）不显示（黑屏）【英文标题】：Embeded Youtube video to WebView (Appcelerator) doesn't show (black screen) 【发布时间】：2016-04-26 13:37:48 【问题描述】：我尝试在我的应用程序（Appcelerator、android）中显示 YT 视频。我发现最好的方法是在 WebView 中显示嵌入视频，所以我用这样的代码来做：
var webView = Ti.UI.createWebView(
url: 'https://www.youtube.com/embed/LTRfmqc0KBg',
enableZoomControls: false,
scalesPageToFit: true,
scrollsToTop: false,
showScrollbars: false
);
但视频无法加载（我只看到黑屏 - 而不是 webview 的白色）。 WebView 可以正常工作，因为它会显示其他页面。
【问题讨论】：
我们发现这种方法存在许多问题并最终放弃了它。我们回到使用 Appcelerator 原生的视频播放器。我想您可能会发现您使用的 URL 不正确。虽然您在自己观看视频时会使用它，但它不适合嵌入到应用程序中。我们最终使用 Youtube api 来获取嵌入在 Youtube 中的视频的原始 url。最终我们放弃了这一点，因为我们不希望 Youtube 粘贴在顶部的广告内容。 那么你的答案是什么，因为你给我写了一些建议，最后你说他们都错了...... 嗨！你有没有找到这个问题的答案？ 【参考方案1】：那你可以试试这个
var Win = Titanium.UI.createWindow(
title : 'Video View Demo',
backgroundColor : '#fff'
);
var video_url = 'https://www.youtube.com/watch?v=bSiDLCf5u3s';
var movie = '<html><head></head><body style="margin:0"><embed id="yt" src="' + video_url + '" type="application/x-shockwave-flash" ></embed></body></html>';
var webView = Ti.UI.createWebView(
top:0,
left:0,
width:480,
height:266,
url:video_url,
html:movie
);
Win.add(webView);
Win.open();
【讨论】：
播放视频时显示“视频不可用”【参考方案2】：您可以调用设备默认的 youtube 应用为用户打开 url。请看下面的代码
var Win = Titanium.UI.createWindow(
title : 'Youtube Video View Demo',
backgroundColor : '#fff'
);
var button = Titanium.UI.createButton(
title: 'Hello',
top: 10,
width: 100,
height: 50
);
button.addEventListener('click',function(e)
Titanium.Platform.openURL('https://www.youtube.com/watch?v=bSiDLCf5u3s');
);
Win.add(button);
Win.open();
谢谢。
【讨论】：
谢谢谢里夫，但它会在浏览器/YT 应用程序中打开视频。我想在应用内显示视频，而不是在应用外...【参考方案3】：我发现嵌入式视频无法在 Android 上运行，而在 ios 上运行良好。 但是，使用 webviews url 属性切换表单以加载视频，使用 setHtml() 函数有效。这样做的方法是使用 Youtube iframe api。
var videoUrl = 'https://www.youtube.com/embed/' + videoId + '? autoplay=1&autohide=1&cc_load_policy=0&color=white&controls=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0';
var playerWidth = $.youtubeWebView.width;
var playerHeight = $.youtubeWebView.height;
var html = '<iframe id="player" type="text/html" src="'+videoUrl+'" frameborder="0"></iframe>';
$.youtubeWebView.setHtml(html);
请注意，iframe 可能会很痛苦，将其添加到加载事件中以消除顶部和左侧奇怪的白色填充
this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');
类似这样的：
$.youtubeWebView.addEventListener('load', function()
this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');
var showYoutubeTimer = setTimeout(function()
$.activityIndicator.hide();
$.youtubeWebView.opacity = 1;
clearTimeout(showYoutubeTimer);
, 300);
);
【讨论】：
以上是关于将 Youtube 视频嵌入到 WebView（Appcelerator）不显示（黑屏）的主要内容，如果未能解决你的问题，请参考以下文章
在 React Native 的 Webview 中嵌入 youtube 视频
Youtube 嵌入视频在 webview 中不起作用。这段代码有啥问题？
Android webview 无法渲染通过 iframe 嵌入的 youtube 视频