2

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

视频未关闭时的屏幕图像。

这是我在里面启动视频的链接-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

4

2 回答 2

6

您可以通过使用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 传递给您的事件侦听器函数的事件对象的数据属性将指定一个与新播放器状态相对应的整数。

因此，在 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;
}

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

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

于 2013-08-12T12:05:13.617 回答
3

这就是您如何将 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;

    }
}
于 2014-11-06T18:39:09.833 回答