Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS Floating Video Window like Youtube App

Does anyone know of any existing library, or any techniques on how to get the same effect as is found on the Youtube App.

The video can be "minimised" and hovers at the bottom of the screen - which can then be swiped to close or touched to re-maximised.

See:

Video Playing Normally: https://www.dropbox.com/s/o8c1ntfkkp4pc4q/2014-06-07%2001.19.20.png

Video Minimized: https://www.dropbox.com/s/w0syp3infu21g08/2014-06-07%2001.19.27.png

(Notice how the video is now in a small floating window on the bottom right of the screen).

Anyone have any idea how this was achieved, and if there are any existing tutorials or libraries that can be used to get this same effect?

like image 661
shabbirh Avatar asked Jun 07 '14 00:06

shabbirh


People also ask

How do you get a YouTube floating window on iPhone?

If picture-in-picture is enabled for your account, the video should automatically pop out into a floating window. You can also check for the feature by tapping your profile picture in the top right of the YouTube app, going to Settings > General, and checking for a toggle labeled “Picture-in-picture.”

How do you make a floating window on the YouTube app?

Step 1: Open a video through the native YouTube app. Step 2: Press the Share button at the top of the screen and then choose the Floating YouTube app from the list. Step 3: Position or resize the floating YouTube window on your screen.

How do you make a floating video on iPhone?

Start watching a video within any app of your choice, or Safari is a good testing ground. Not all apps support Picture-in-Picture mode, however. Look for the pop-out icon in the playback controls. If you see it, tap on it and the video will float on the screen once the app minimizes.

Can you watch YouTube in a small window on iPhone?

With Picture in Picture, you can watch a video or use FaceTime while you use other apps. The video window scales down to a corner of your screen so you can see the Home Screen and open other apps.


2 Answers

Update new framwork FWDraggableSwipePlayer for drag uiview like YouTube app.

hope to help you.

like image 149
Love Thailand Avatar answered Sep 23 '22 23:09

Love Thailand


It sounded fun, so I looked at youtube. The video looks like it plays in a 16:9 box at the top, with a "see also" list below. When user minimizes the video, the player drops to the lower right corner along with the "see also" view. At the same time, that "see also" view fades to transparent.

1) Setup the views like that and created outlets. Here's what it looks like in IB. (Note that the two containers are siblings)

enter image description here

2) Give the video view a swipe up and swipe down gesture recognizer:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *tallMpContainer;
@property (weak, nonatomic) IBOutlet UIView *mpContainer;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UISwipeGestureRecognizer *swipeDown = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeDown:)];
    UISwipeGestureRecognizer *swipeUp = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeUp:)];

    swipeUp.direction = UISwipeGestureRecognizerDirectionUp;
    swipeDown.direction = UISwipeGestureRecognizerDirectionDown;

    [self.mpContainer addGestureRecognizer:swipeUp];
    [self.mpContainer addGestureRecognizer:swipeDown];
}

- (void)swipeDown:(UIGestureRecognizer *)gr {
    [self minimizeMp:YES animated:YES];
}

- (void)swipeUp:(UIGestureRecognizer *)gr {
    [self minimizeMp:NO animated:YES];
}

3) And then a method to know about the current state, and change the current state.

- (BOOL)mpIsMinimized {
    return self.tallMpContainer.frame.origin.y > 0;
}

- (void)minimizeMp:(BOOL)minimized animated:(BOOL)animated {

    if ([self mpIsMinimized] == minimized) return;

    CGRect tallContainerFrame, containerFrame;
    CGFloat tallContainerAlpha;

    if (minimized) {
        CGFloat mpWidth = 160;
        CGFloat mpHeight = 90; // 160:90 == 16:9

        CGFloat x = 320-mpWidth;
        CGFloat y = self.view.bounds.size.height - mpHeight;

        tallContainerFrame = CGRectMake(x, y, 320, self.view.bounds.size.height);
        containerFrame = CGRectMake(x, y, mpWidth, mpHeight);
        tallContainerAlpha = 0.0;

    } else {
        tallContainerFrame = self.view.bounds;
        containerFrame = CGRectMake(0, 0, 320, 180);
        tallContainerAlpha = 1.0;
    }

    NSTimeInterval duration = (animated)? 0.5 : 0.0;

    [UIView animateWithDuration:duration animations:^{
        self.tallMpContainer.frame = tallContainerFrame;
        self.mpContainer.frame = containerFrame;
        self.tallMpContainer.alpha = tallContainerAlpha;
    }];
}

I didn't add video to this project, but it should just drop in. Make the mpContainer the parent view of the MPMoviePlayerController's view and it should look pretty cool.

like image 44
danh Avatar answered Sep 21 '22 23:09

danh