将 Youtube 视频嵌入到 WebView（Appcelerator）不显示（黑屏）答案

【问题标题】：Embeded Youtube video to WebView (Appcelerator) doesn't show (black screen)将 Youtube 视频嵌入到 WebView（Appcelerator）不显示（黑屏）
【发布时间】：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 粘贴在顶部的广告内容。
那么你的答案是什么，因为你给我写了一些建议，最后你说他们都错了......
嗨！你有没有找到这个问题的答案？

标签： android video webview youtube appcelerator

【解决方案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" width="480" height="266"></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" width="'+playerWidth+'" height="'+playerHeight+'" 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);
});

【讨论】：