iOS浮动视频窗口(如Youtube App)

问题描述

是否有人知道任何现有的库或有关如何获得与YouTube应用程序相同的效果的任何技术.

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.

请参阅:

正常播放视频: https://www.dropbox.com/s /o8c1ntfkkp4pc4q/2014-06-07%2001.19.20.png

将视频最小化: 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?

推荐答案

听起来很有趣，所以我看了看youtube.该视频看起来像在顶部的16:9框中播放，并在下面显示另请参阅"列表.当用户最小化视频时，播放器将与另请参见"视图一起下降到右下角.同时，另请参见"视图逐渐变为透明.

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)设置类似的视图并创建出口.这就是IB中的样子. (请注意，这两个容器是同级的)

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

2)使视频视图向上滑动和向下滑动手势识别器:

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)然后是一种了解当前状态并更改当前状态的方法.

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;
    }];
}

我没有向该项目添加视频，但应该将其插入.使mpContainer成为MPMoviePlayerController视图的父视图，它应该看起来很酷.

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.

这篇关于iOS浮动视频窗口(如Youtube App)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！