2014-10-09 35 views
3

我很難在UIWebview中播放嵌入式的youtube。UIWebview不會顯示嵌入式YouTube的iOS 8

如果我使用了來自youtube的默認嵌入格式,它不會在UIWebview中顯示任何內容。只是空白。

NSString *htmlString = @"<html><body><iframe width=\"420\" height=\"315\" src=\"//www.youtube.com/embed/XNnaxGFO18o?rel=0\" frameborder=\"0\" allowfullscreen></iframe></body></html>"; 
[self.webView loadHTMLString:htmlString baseURL:nil]; 

我搜索了一下,發現下面的代碼工程。

NSString* embedHTML = @"\ 
<html><body style=\"margin:0;\">\ 
<<div class=\"emvideo emvideo-video emvideo-youtube\"><embed id=\"yt\" src=\"http://www.youtube.com/embed/bPM8LKYMcXs?hd=1\" width=\"320\" height=\"250\"></embed></div>\ 
</body></html>"; 
[self.webView loadHTMLString:embedHTML baseURL:nil]; 

但是,有一個問題。如果我點擊播放按鈕,它沒有任何反應。我必須多次點擊播放按鈕並等待一段時間,然後開始旋轉然後播放。

所以我有兩個問題。

1)您是否有更好的方式在UIWebView中播放嵌入的YouTube視頻? 2)如何在點擊播放按鈕後立即播放視頻?

謝謝。

回答

1

創建一個純html文件,並將它命名爲youtubeEmbedding.html並將其添加到在youtubeEmbedding.html項目只是下面的代碼添加到.html文件

<!DOCTYPE html> 
<html> 
<head> 
    <style>body{margin:0px 0px 0px 0px;}</style> 
</head> 
<body> 
    <div id="player"></div> 
    <script> 
     var tag = document.createElement('script'); 
     tag.src = 'http://www.youtube.com/player_api'; 

     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
     firstScriptTag.requestFullScreen(); 
     var ytplayer = null; 

     function onYouTubePlayerAPIReady() 
     { 
      ytplayer = new YT.Player(
            'player', 
            { 
            videoId:'%@', 
            width:'%0.0f', 
            height:'%0.0f', %@ 
            playerVars: 
            { 
            'controls': %d, 
            'playsinline' : 0, 
            'rel':0, 
            'showinfo':0 
            }, 
            }); 
     } 


    function onPlayerReady(event) 
    { 
     event.target.playVideo(); 
    } 

    function stopVideo() 
    { 
     if (ytplayer) 
     { 
      ytplayer.stopVideo(); 
      ytplayer.clearVideo(); 
     } 
     return 'STOPPED'; 
    } 

    function playVideo() 
    { 
     if (ytplayer) 
     { 
      ytplayer.playVideo(); 
     } 
     return 'PLAY'; 
    } 

    function pauseVideo() 
    { 
     if (ytplayer) 
     { 
      ytplayer.pauseVideo(); 
      ytplayer.clearVideo(); 
     } 
     return 'PAUSED'; 
    } 

    function getPlayerState() 
    { 
     return ytplayer.getPlayerState(); 
    } 

    function isPlaying() 
    { 
     return (myPlayerState == YT.PlayerState.PLAYING); 
    } 
    function isPaused() 
    { 
     return (myPlayerState == YT.PlayerState.PAUSED); 
    } 
    function onPlayerError(event) 
    { 
     alert("Error"); 
    } 
    </script> 
</body> 

,並在控制器其中u正在使用網絡視圖就像下面這樣做

- (void)viewDidLoad 
{ 
    BOOL autoPlay = NO; 
    // Do any additional setup after loading the view, typically from a nib. 
    NSString *youTubeVideoHTML = [[NSString alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"youtubeEmbedding" ofType:@"html"] encoding:NSUTF8StringEncoding error:nil]; 
    NSString *autoPlayString = autoPlay ? @"events: {'onReady' : onPlayerReady }," : @""; //customise it weather u want to autoplay or not 
    NSURL *url = [NSURL URLWithString:@"https://www.youtube.com/watch?v=AYo72E7ZMHM"]; 
    NSString *lastComponent = [url query]; 
    NSString *videoId = [lastComponent stringByReplacingOccurrencesOfString:@"v=" withString:@""]; //get the video id from url 
    NSInteger controls = 1; //i want to show controles for play,pause,fullscreen ... etc 
    NSString *html  = [NSString stringWithFormat:youTubeVideoHTML, videoId, CGRectGetWidth(_webView.frame), CGRectGetHeight(_webView.frame), autoPlayString, controls]; //setting the youtube video width and height to fill entire the web view 
    _webView.mediaPlaybackRequiresUserAction = NO; 
    _webView.delegate = self; //not needed 
    [_webView loadHTMLString:html baseURL:[[NSBundle mainBundle] resourceURL]]; //load it to webview 

} 


//for playing action 
- (IBAction)playAction:(id)sender 
{ 
    [_webView stringByEvaluatingJavaScriptFromString:@"ytplayer.playVideo()"]; 
} 

評論如果你有任何問題,希望這有助於你.. :)

+0

奇怪的是,uiwebview是空白的。我打印出html,它有正確的內容。 – user890207 2014-10-10 04:20:41

+0

@ user890207我測試了它在iOS8中的工作原理 – 2014-10-10 04:59:34

+0

@ user890207在新項目中測試它 – 2014-10-10 05:21:35