I am using YTPlayerView classes to play YouTube videos. Below is the code i am using to load video according to device screen size (large size for iPad and small size for iPhone). And it is working fine.
Problem --
When i change device mode to landscape, i want larger YTPlayerView then in portrait mode. For now video has same size for both screen modes.
- (BOOL)loadWithPlayerParams:(NSDictionary *)additionalPlayerParams {
NSDictionary *playerCallbacks = #{
#"onReady" : #"onReady",
#"onStateChange" : #"onStateChange",
#"onPlaybackQualityChange" : #"onPlaybackQualityChange",
#"onError" : #"onPlayerError"
};
NSMutableDictionary *playerParams = [[NSMutableDictionary alloc] init];
[playerParams addEntriesFromDictionary:additionalPlayerParams];
if([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad)
{
[playerParams setValue:#"551px" forKey:#"height"];
[playerParams setValue:#"768px" forKey:#"width"];
}
else
{
[playerParams setValue:#"250px" forKey:#"height"];
[playerParams setValue:#"320px" forKey:#"width"];
}
-----
-----
}
I can not use this check to give larger size to view, because above code does not called in-between video play.
if([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscape)
Do you people have any idea how to fix this problem? Or if there is any other solution using JavaScript and css as html string to webView.
YTPlayerView actually uses webview to play the viedo, so you can only use css or javascript to change the size. There should be an html file named "YTPlayerView-iframe-player.html" in the Assets folder.
here is the css sample:
<style>
body { margin: 0; width:100%%; height:100%%; }
html { width:100%%; height:100%%; }
</style>
I have used YTPlayer in my story board and have put proper contraints on it as i'm using autolayouts in my project. It's working fine for me in both landscape and portrait mode.. I think the solution to your issue is autolayouts
Related
I am using js based app with the support of ejecta kitchen. My problem is an image which i have set on the MainWindow that displays wrong orientation or in other words it displays fixed orientation. My application require everything to be displays in landscape mode but XIB file display things upside down whenever i change the orientation of my IPAD.
I have searched alot on internet but i could not find any possible solution yet.This is the only file which has this problem , other than this my index.html file works fine which is built on construct2.
Here is the image which displays the hierarchy of my window and image
As per your issue, you can write your code as below in AppDelegate method.
- (void) application:(UIApplication *)application willChangeStatusBarOrientation:(UIInterfaceOrientation)newStatusBarOrientation
duration:(NSTimeInterval)duration
{
if (newStatusBarOrientation == UIInterfaceOrientationPortrait)
yourImage.transform = CGAffineTransformIdentity;
else if (newStatusBarOrientation == UIInterfaceOrientationPortraitUpsideDown)
yourImage.transform = CGAffineTransformMakeRotation(-M_PI);
else if (UIInterfaceOrientationIsLandscape(newStatusBarOrientation))
{
float rotate = ((newStatusBarOrientation == UIInterfaceOrientationLandscapeLeft) ? -1:1) * (M_PI / 2.0);
yourImage.transform = CGAffineTransformMakeRotation(rotate);
yourImage.transform = CGAffineTransformTranslate(yourImage.transform, 0, -yourImage.frame.origin.y);
}
}
as per the above code, you can rotate your Background image.
Our iPhone app, built with PhoneGap, is published as a Universal app. The Universal setting is required for app discovery on iPads and for the execution of certain PhoneGap plugins.
We tweaked a few height and width settings, but the scale is too small for some users.
We don't have the capacity to re-code the app and recreate assets for optimal rendering on iPads.
Instead, we would like to mimic the 2x mode available on iPads -- but only on iPads. 2x mode was available when the app was iPhone-only, but the option is obviously gone now that it's a Universal app.
Is there a way to invoke this functionality, either through HTML/CSS/JS or through Objective-C?
Thanks!
I think that you want to scale up UI elements, and not the contents. For example, if you set UIImageView frame as { 0, 0, 100, 100 }, then on iPad it'll still have frame as { 0, 0, 100, 100 } and will look too small. What you want to do is to have separate XIB files for iPhone and iPad. In this way you'll be able to create UIView frames according to the platform.
At runtime iOS will choose appropriate XIB file for current platform. Here you'll be able to find some documentation about how it works.
Here you can see an example of that:
In you AppDelegate's didFinishLaunchingWithOptions, do something like this:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
...
// Get screen size
CGRect screenBounds = [[UIScreen mainScreen] bounds];
CGRect windowFrame = screenBounds;
BOOL scale = NO;
// Check if we are running on an iPad
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
// If this is the case, set the size to an iPhone with a 3.5 po screen, then scale
windowFrame.size = CGSizeMake(320, 480);
windowFrame.origin.x = (screenBounds.size.width - windowFrame.size.width) / 2.0;
windowFrame.origin.y = (screenBounds.size.height - windowFrame.size.height) / 2.0;
scale = YES;
}
self.window = [[UIWindow alloc] initWithFrame:windowFrame];
[self.window setClipsToBounds:YES];
if (scale) {
self.window.transform = CGAffineTransformMakeScale(2.0, 2.0);
}
...
return YES;
}
That way, you would mimic a 2X mode by setting the UIWindow to an iPhone screen size and applying a scale transform. You would probably need to check for screen orientation, but I tried it with an iPhone only project changed into an universal app and it works.
fairly simple.. you can easily check if the device is iphone or pad
var d = $('body').height():
if(d > 548){
$('body').css({'height':'548px','-webkit-transform': 'scale(2,2)'});
}
the webkit transform scale actually scales every thing just like you want, and will make all your assets blurry etc but fonts divs etc in side the body scale =)
If you are loading images in html . You should set images in css and not in html directly using #media tags you need to write separate css for iPhone/iPad , iPhone/iPad retina .
http://stephen.io/mediaqueries/ . This link has all queries #media description
For example:
Index.html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<div class="mynewDiv">
……………………………………
……………………………
<div>
And in style.css
/* iPad STYLES GO HERE */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.mynewDiv
{
background: url("../image/iPadBg.png");
}
}
/* iPhone5 STYLES GO HERE */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.mynewDiv
{
background: url("../image/iPhone5bg.png");
}
}
/* iPhone STYLES GO HERE */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.mynewDiv
{
background: url("../image/iPhone5bg.png");
}
}
Like this you have to modify your html and css . Then appropriate images will loaded in devices
what ultimately worked was applying a special CSS class that defined -webkit-transform: scale(2) and -webkit-transform-origin: top while slicing the height and width by 50%. through javascript, we applied these modifications whenever any device exceeded a certain size, in our case 640 px.
I'm making an app in Adobe AIR targeting iOS 4.0+ and Android 2.3+. I've tried to disable iOS elastic scrolling for the embedded YT video: When the user presses the player's IFrame the whole video pans over and I can't seem to find a way around this.
I've tried adding event listeners to prevent this behavior but it doesn't work.
By the way, I'm aware that I can't really control what happens in the IFrame. A quick and dirty solution would be to put elements directly over the frame, like a transparent canvas or a div that would catch the events. Not ideal at all, because users won't be able to press the buttons on the player.
Any ideas or suggestions?
Thanks!
I found a solution.
You need access to UIWebView (the underlying iOS implementation under StageWebView) to disable elastic scrolling.
Once you have your Adobe Native Extension (ANE) setup, its relatively simple. (A great ANE Wizard/Generator is found here https://github.com/freshplanet/ANE-Wizard)
For iOS 5 its straightforward: webView.scrollView.bounces = NO;
If you want to support iOS 4, it gets a bit more complex. You don't have the convenience of webView.scrollView, so you need to find this view manually.
An Objective-C code block that handles both iOS 4 and 5 would be something like this:
NSString *currSysVer = [[UIDevice currentDevice] systemVersion];
if ([currSysVer compare:#"5.0" options:NSNumericSearch] != NSOrderedAscending) {
// iOS 5 is straightforward
webView.scrollView.bounces = NO;
}
else {
// iOS 4 requires a bit more of work
UIScrollView *scrollView = nil;
for (UIView *subview in [webView subviews])
{
if ([subview isKindOfClass:[UIScrollView class]]) {
scrollView = (UIScrollView *)subview;
}
}
if (scrollView != nil) {
scrollView.bounces = NO;
}
}
Hope this helps!
Hopefully somebody can point out what I'm doing wrong with my Splash screen here. The problem is that the screen is displaying in portrait mode, not landscape...
- (void)showSplash
{
UIView *modelView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 1024 , 748)];
UIViewController *modalViewController = [[UIViewController alloc] init];
[modelView setBackgroundColor:[[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"Splash.png"]]];
modalViewController.view = modelView;
[self presentModalViewController:modalViewController animated:NO];
[self performSelector:#selector(hideSplash) withObject:nil afterDelay:5.0];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}
Thanks in advance for the help.
Looks like you are writing app for iPad. If so, you have to support both landscape as well as portrait orientation otherwise Apple will reject it. I would suggest that you should use two different images. Image specifications are as follows:
Default-Landscape.png (1004 * 768)
Default-Portrait.png (748*1024)
(I am assuming that you are showing status bar if not add 20 pixels to height of an image)
That's it, create these images and add it to your project. And you are good to go. No Need to write any additional piece of code too..
And ya make it
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
You shouldn't rely on a function in your code to display the splash screen. Just define them as the previous answer from Sumit Lonkar explains.
If you do it in code, I believe at the start of the application the orientation is always considered as portrait, then the transition to the actual orientation is triggered. This explains why your code displays first as portrait and most likely there is nothing else in the code to handle rotation. Besides, the purpose of the splash screen is to display something while the app is loading, so if you put it in code you lose the purpose.
By doing it the Apple way you leave it to another Apple process that runs before looking at your code and it will work.
Regarding the orientation supported I have on my iPad some apps that support only landscape (TapZoo for example) so it should be ok with Apple.
I'd like to have a nice start of my app by fading from the splash screen (UILaunchImageFile) into the main screen. Easy thing, I thought, just show an UIImageView with the splash screen as the very first view and then make a transition animation.
The problem is, since this is an iPad app with all four orientations supported, and splash screens for all these orientations, I would need to query which splash screen was used. I could query the current device rotation and select the image accordingly, but I wonder whether there's a better way.
So, can I query somehow which launch image was used during app start or do I need to ask for the device's current UI orientation and chose the file accordingly ?
No, you can't do this automagically. Querying the device rotation and selecting an image based on that is perfectly fine.
You really only need Portrait or Landscape in this situation though, assuming you are rotating your view properly.
As already stated by Joshua you cannot, as far as I am aware.
In case this might help someone else, if you are using asset catelogs the following code should provide the correct launch image for the current interface orientation.
NSString *suffix = nil;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
suffix = [[UIScreen mainScreen] bounds].size.height >= 568.0f ? #"-568h#2x" : #"#2x";
}
else {
UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
suffix = UIInterfaceOrientationIsPortrait(orientation) ? #"-Portrait" : #"-Landscape";
suffix = [UIScreen mainScreen].scale == 2.0 ? [suffix stringByAppendingString:#"#2x~ipad"] : [suffix stringByAppendingString:#"~ipad"];
}
NSString *launchImageName = [NSString stringWithFormat:#"LaunchImage-700%#.png",suffix];