嵌入Youtube视频到WebView（Appcelerator）不显示（黑屏）。

本文是小编为大家收集整理的关于嵌入Youtube视频到WebView（Appcelerator）不显示（黑屏）。的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我试着在我的应用程序中显示yt视频(Appcelerator，Android).我发现最好的方法是在WebView中展示嵌入视频，所以我用这样的代码:

var webView = Ti.UI.createWebView({
   url: 'https://www.youtube.com/embed/LTRfmqc0KBg',
   enableZoomControls: false,
   scalesPageToFit: true,
   scrollsToTop: false,
   showScrollbars: false
});

但视频不加载(我只看到黑屏 - 而不是webview的白色). WebView正常工作，因为它显示了其他页面.

其他推荐答案

您可以调用设备默认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();

谢谢.

其他推荐答案

我发现嵌入式视频无法在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);

抬起，iframes可以是一个痛苦，在装载事件中添加它以摆脱顶部和左侧的奇怪的白色填充

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

本文地址：https://www.itbaoku.cn/post/1938236.html

百度翻译此文有道翻译此文

问题描述

I try to show YT video in my application (Appcelerator, Android). I found that the best way is to show embeded video in WebView, so I do it with such code:

var webView = Ti.UI.createWebView({
   url: 'https://www.youtube.com/embed/LTRfmqc0KBg',
   enableZoomControls: false,
   scalesPageToFit: true,
   scrollsToTop: false,
   showScrollbars: false
});

but video does not load (I see only black screen - instead of webview's white). WebView works properly because it shows other pages.

其他推荐答案

You can call the device default youtube app to open the url for the user. See the below code

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

Thanks.

其他推荐答案

I found that embedded videos wouldn't work on Android, while doing fine on iOS. However switching form using the webviews url property to load the video, to using the setHtml() function works. The way to do this is by using the 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);

Heads up, iframes can be a pain, add this in the load event to get rid of the wierd white padding on the top & left side

this.evalJS('document.getElementsByTagName("body")[0].style.margin=0;');

Something like this:

$.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);
});

上一篇：在Appcelerator/Titanium的TableView中，在insertRowBefore上禁用自动滚动顶部

下一篇：JS如何检查空字符串和空间