Menu
How do I access the webkitExitFullScreen on mobile (iPhone) safari (webkit) functionality on full screen.
On an iPhone using the IFrame API a video always plays full screen, but I can't afterwards access different functionalities via JS like the webkitExitFullScreen.
I saw that this has been filed already to the forum and the team in the YouTube API Forum in here:
https://groups.google.com/d/msg/youtube-api-gdata/fygn23jMbdE/pNE57RDl1gEJ
and
https://groups.google.com/forum/#!msg/youtube-api-gdata/7ioV74oFX84/U8zQ7-Yl9w4J
I wanted to ask and follow up on their questions especially the last one since it has been a year ago already. But the groups are now closed and said I should file here. Has anyone have any idea if this has been implemented somewhere in the API already and I might have been missing it? Or maybe how to contact the team and ask them directly about the progress or situation?
251
Looking at the API reference for the iframe player, I don't think it's possible to set it to fullscreen (with the iframe API alone)- ctrl f didn't find fullscreen, so either it's a secret method hidden inside the API or it doesn't exist.
The library builds on top of the IFrame Player API by creating a WebView and rendering the HTML and JavaScript required for a basic player. The library's goal is to be as easy-to-use as possible, bundling methods that developers frequently have to write into a package.
YouTube don't expose fullscreen in their API, but you can call the native browser requestFullScreen() function from the playerStateChange() event from the YouTube API or make your own custom play button like I have.
The playsinline parameter enables the video to play directly in the view rather than playing fullscreen. When a video is playing inline, the containing iOS application can programmatically control playback. Replace the loadWithVideoId: call with this code: Open up the storyboard or Interface Builder.
write this in your 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"]];
and the below method will fire after completion of your video
- (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;}
and create .html file and paste this code in .html file
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
