2013-08-12 102 views
2

我目前正在加載-UIwebView內的YouTube視頻,此操作完美並且視頻自動播放。但問題是,一旦視頻在-UIwebView內完成,它就會停止並顯示播放按鈕。不過,我希望視頻播放器關閉,因此用戶不必每次都手動點擊「完成」按鈕。完成播放後YouTube視頻不會關閉

Image of the screen when the video doesn't close.

這裏的鏈接我啓動視頻-UIwebview

NSString *youTubeVideoHTML = [NSString stringWithFormat:@"<!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); 
    var player; 

    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      width:'320', 
      height:'200', 
      videoId:'%@', 
      events: { 
       'onReady': onPlayerReady, 
      } 
     }); 
    } 

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

</script> </body> </html>", [[NSUserDefaults standardUserDefaults] 
objectForKey:@"detailVideoURL"]]; 

編輯裏面:

我試圖實施第一個答案進入我的代碼,這是它是如何結束喜歡。我仍然不確定我應該在回調中添加什麼內容?

NSString *youTubeVideoHTML = [NSString stringWithFormat:@"<!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); var player; 

    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
    width:'320', 
    height:'200', 
    videoId:'%@', 
    events: { 
    'onReady': onPlayerReady, 
    } 
    }); 
} 
function onPlayerReady(event) { 
event.target.playVideo(); 
} 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); done = true; 
    } 

if (event.data == YT.PlayerState.ENDED) { 
window.location = "callback:nil"; }; } 

    function stopVideo() { 
player.stopVideo(); 

} 

</script> </body> </html>", [[NSUserDefaults standardUserDefaults] objectForKey:@"detailVideoURL"]; 

圖像錯誤:http://gyazo.com/31da955d8af98f40b82789a7f60c1edb

回答

5

您可以通過使用youtube api從JavaScript調用你的目標函數做到這一點。

在HTML/JavaScript端

<html> 
    <body> 
     <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
     <div id="player"></div> 

     <script> 

      // 2. This code loads the IFrame Player API code asynchronously. 
      var tag = document.createElement('script'); 
      tag.src = "http://www.youtube.com/player_api"; 
      var firstScriptTag = document.getElementsByTagName('script')[0]; 
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

      // 3. This function creates an <iframe> (and YouTube player) 
      // after the API code downloads. 
      var player; 
      function onYouTubePlayerAPIReady() { 
       player = new YT.Player('player', { 
             height: '300', 
             width: '250', 
             videoId: 'GUdYebAN-Fs', 
             events: { 
             'onReady': onPlayerReady, 
             'onStateChange': onPlayerStateChange 
             } 
             }); 
      } 

      // 4. The API will call this function when the video player is ready. 
      function onPlayerReady(event) { 
       event.target.playVideo(); 
      } 

      // 5. The API calls this function when the player's state changes. 
      // The function indicates that when playing a video (state=1), 
      // the player should play for six seconds and then stop. 
      var done = false; 
      function onPlayerStateChange(event) { 
       event.target.destroy(); 

       if (event.data == YT.PlayerState.PLAYING && !done) { 
        setTimeout(stopVideo, 60000); 


        done = true; 
       } 
       if (event.data == YT.PlayerState.ENDED) { 

         event.target.destroy();//to close the video 
         window.location = "callback:anything"; //here's the key 
       }; 
      } 
      function stopVideo() { 
       player.stopVideo(); 
      } 
      </script> 
    </body> 
</html> 

onStateChange - 從谷歌的API參考頁

此事件每當玩家的狀態變化。 API傳遞給事件偵聽器函數的事件對象的data屬性將指定一個與新玩家狀態相對應的整數。

所以在javascript函數,你將能夠跟蹤視頻time.Then的結束只是
添加event.target.destroy()在進入狀態結束條件。

在本地/ iOS的一面:

甚至可以使用web視圖的委託方法趕超回調方法在這裏做本土的東西。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { 


    if ([[[request URL] scheme] isEqualToString:@"callback"]) { 

     //Video has ended up playing,you can perform native stuff here... 

     return NO; 
    } 

    return YES; 
} 

注:請確保你的設備來測試該代碼,因爲有時模擬器將不被支持。

好運...希望它可以幫助...

+0

你可以看一下我的編輯好嗎?它工作不正常,我不確定爲什麼先生。 –

+0

@ GretarAgnarsson ..已完全編輯答案..請仔細閱讀.. –

3

這是如何應用Puneeth的解決方案,以谷歌的YTPlayerView所以玩家在視頻結束後隱藏:

- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state 
{ 
    if(state == kYTPlayerStateEnded) { 
     [self.youTubePlayer.webView stringByEvaluatingJavaScriptFromString:@"player.destroy();"]; 
     // you'll have to recreate the player again since it's now destroyed 
     [self.youTubePlayer removeFromSuperview]; 
     self.youTubePlayer = nil; 

    } 
} 
+0

如果用戶嘗試停止視頻,即按下X按鈕 - 收到的狀態爲「kYTPlayerStatePaused」 – dchakarov

相關問題