Embeded Youtube video to WebView (Appcelerator) doesn't show (black screen)

问题

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.

回答1:

Then you can try this

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:

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.

回答3:

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

来源：https://stackoverflow.com/questions/34904600/embeded-youtube-video-to-webview-appcelerator-doesnt-show-black-screen

标签

android

video

webview

youtube

appcelerator