IOS上的YouTube IFrame API和webkitExitFullScreen [重访]

时间:2013-07-02 10:00:42

标签: iphone ios iframe youtube youtube-api

如何在全屏模式下访问移动设备(iPhone)上的webkitExitFullScreenwebkit)功能。

在使用IFrame API的iPhone上,视频总是全屏播放,但之后我无法像webkitExitFullScreen那样通过JS访问不同的功能。

我看到这已经提交给论坛和YouTube API Forum中的团队了:

https://groups.google.com/d/msg/youtube-api-gdata/fygn23jMbdE/pNE57RDl1gEJ

https://groups.google.com/forum/#!msg/youtube-api-gdata/7ioV74oFX84/U8zQ7-Yl9w4J

我想询问并跟进他们的问题,特别是最后一次,因为它已经是一年前了。但这些团体现已关闭,并说我应该在这里提交。有没有人知道这是否已经在the API的某个地方实现过了,我可能已经错过了它?或者也许如何联系团队并直接询问他们的进展或情况?

1 个答案:

答案 0 :(得分:1)

将此内容写入viewdidload

 webView112 = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
webView112.backgroundColor = [UIColor redColor];
webView112.allowsInlineMediaPlayback = YES;
webView112.mediaPlaybackRequiresUserAction = NO;
webView112.delegate = self;
[self.view addSubview:webView112];

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"youtube" ofType:@"html"];
NSString *html = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];

[webView112 loadHTMLString:html baseURL:[NSURL URLWithString:@"any static url"]];

以下方法将在视频完成后触发

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
if ( [[[request URL] scheme] isEqualToString:@"callback"] )
{

    NSLog(@"get callback");
    [webView112 removeFromSuperview];

    return NO;
}

return YES;}

并创建.html文件并将此代码粘贴到.html文件中

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    <script>
        var elapsed = -1;
        var isPlayerLoaded = false;
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

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

        //            function onPlayerError(event) {
        //            }
        //
        function onPlayerStateChange(event) {
            var state = '';
            switch(event.data) {
                case YT.PlayerState.ENDED:
                   window.location = "callback:anything";
                    break;
                case YT.PlayerState.PLAYING:
                    state = 'playing';
                    break;
                case YT.PlayerState.PAUSED:
                    state = 'paused';
                    break;
                case YT.PlayerState.BUFFERING:
                    state = 'buffering';
                    break;
                case YT.PlayerState.CUED:
                    state = 'cued';
                    break;
                default:
                    state = 'unstarted';
                    break;
            }
            jQuery('#log').append(state + "<br/>");
        }

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                                   height: '400',
                                   width: '320',
                                   videoId: 'y84oAUjA8ms',
                                   playerVars: { 'autoplay': 0, 'modestbranding': 1, 'rel': 0, 'showinfo': 0, 'iv_load_policy': 3, 'controls': 1, 'playsinline':1 },
                                   events: {
                                   'onReady': onPlayerReady,
                                   'onStateChange': onPlayerStateChange
                                   //                                       'onError': onPlayerError
                                   }
                                   });
        }

        </script>
</head>
<body style="padding:0;margin:0;background-color:#000000;">
    <div id="log" style="background:#fff;height:0px;width:0%;margin-top:0px;"></div>
    <div id="player" frameborder="0"></div>
</body>