Question

我目前正在-UIwebView内加载YouTube视频，效果很好，视频会自动开始播放。但问题是，一旦视频在-UIwebView内完成，它就会停止并显示播放按钮。但是我想要关闭视频播放器，这样用户就不必每次都手动点击“完成”按钮。

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

Answer 1

您可以使用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 - 来自Google的API参考页

只要玩家的状态发生变化，此事件就会触发。 API传递给事件侦听器函数的事件对象的data属性将指定与新播放器状态对应的整数。

因此，在javascript函数中，您可以跟踪视频结束时间。然后只需要在输入状态结束条件时添加 event.target.destroy（）。

在原生/ iOS方面：

即使你可以使用webview委托方法追赶回调方法，也可以在这里做原生的东西。

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

注意：请务必在您的设备中测试此代码，因为有时模拟器不会支持。

祝你好运......希望有所帮助...

Answer 2

这就是你可以将Puneeth的解决方案应用到Google的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;

    }
}

完成播放后，YouTube视频未关闭

2 个答案: