How to add OverLay View in UIWebView Video Player?

Question

I want to add some custom controls over UIWebView's Video Player. I am able to add any control over it by below code :

First I am adding below notification,

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(addOverLayView:) name:UIWindowDidBecomeVisibleNotification object:nil]; 

Then on receiving of it,

-(void)addOverLayView:(NSNotification*)aNotification{
    UIWindow *window = (UIWindow *)aNotification.object;

    if (window != self.view.window) {
        [window addSubview:anyCustomview];
    }
}

But this view will statically on top of UIWebView's Video view. But I wants to achieve like when controls of Video player will hide then I want to hide my custom View.

In other words I want to achieve custom OverLayView on UIWebView's Video Player view.

Answer 1

It seems that it is not possible "out of the box". The docs state that the movie player emits notifications in these situations :

When the movie player begins playing, is paused, or begins seeking forward or backward
When AirPlay playback starts or ends
When the scaling mode of the movie changes
When the movie enters or exits fullscreen mode
When the load state for network-based movies changes
When meta-information about the movie itself becomes available

So there is no way of getting to know when the controls did hide/show.

If you want to show your view only once, after the user opens the view, you can achieve this pretty easily, for example with animation :

-(void)addOverLayView:(NSNotification*)aNotification{
    UIWindow *window = (UIWindow *)aNotification.object;

    if (window != self.view.window) {
        [window addSubview:anyCustomview];

        [UIView animateWithDuration:2 //choose a fitting value here
                              delay:3 //this has to be chosen experimentally if you want it to match with the timing of when the controls hide
                            options:UIViewAnimationOptionCurveEaseOut
                         animations:^{
                             anyCustomView.alpha = 0.0f; //fadeout animation, you can leave this block empty to have no animation
                       } completion:^(BOOL finished) {
                             [anyCustomView removeFromSuperview];
                       }];
    }
}

Note that this will not hide your view when the user discards the controls.

If you want to show/hide your view every time the controls are shown/hidden it gets much more trickier. One approach would be to disable standard controls and recreate them - bear in mind that it is not easy.

Answer 2

This is quite the hack, but it does work.

//
//  ViewController.m
//

#import "ViewController.h"

@interface ViewController ()

@property UIWebView *webView;

@property UIWindow *playerWindow;
@property UIView *customView;
@property UIView *transitionView;
@property NSTimer *timer;

@end

@implementation ViewController

-(void)loadView
{
    self.view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    _webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:_webView];

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(addOverLayView:) name:UIWindowDidBecomeVisibleNotification object:nil];

}

-(void)addOverLayView:(NSNotification*)aNotification
{
    UIWindow *window = (UIWindow *)aNotification.object;
    _customView = [UIView new];
    _customView.backgroundColor = [UIColor yellowColor];
    _customView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height - 80, [UIScreen mainScreen].bounds.size.width, 80);
    _customView.alpha = 0.0;
    if (window != self.view.window)
    {
        _playerWindow = window;
        [_playerWindow addSubview:_customView];
        _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timerMethod) userInfo:nil repeats:YES];
    }
}

- (void)timerMethod
{
    if(_transitionView)
    {
        UIView *view = [_transitionView.subviews lastObject];
        view = [view.subviews lastObject];
        for(UIView *subView in view.subviews)
        {
            if([subView.layer.sublayers count])
            {
                CALayer *finalLayer = [subView.layer.sublayers lastObject];
                CAAnimation *animation = [finalLayer animationForKey:@"opacity"];
                if(animation)
                {
                    if(finalLayer.opacity)
                    {
                        [UIView animateWithDuration:animation.duration delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                        _customView.alpha = 1.0;} completion:nil];
                    }
                    else
                    {
                        [UIView animateWithDuration:animation.duration delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
                            _customView.alpha = 0.0;} completion:nil];
                    }
                } 
            }
        }
    }
    else
    {
        for(id view in _playerWindow.subviews)
        {
            NSString *className = [NSString stringWithFormat:@"%@", [view class]];
            if([className isEqualToString:@"UITransitionView"])
            {
                _transitionView = view;
                break;
            }
        }

    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
    NSString *fullURL = @"http://www.youtube.com";
    NSURL *url = [NSURL URLWithString:fullURL];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    [_webView loadRequest:requestObj];
}

@end

Answer 3

You can use iOS-JavaScript bridge to accomplish this.

You can load your script in WebView which observe some elements or its property change. And use Bridge to communicate between your java script and Native iOS code.

You can take look at bellow reference for more help. https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/SafariJSProgTopics/ObjCFromJavaScript.html#//apple_ref/doc/uid/30001215-BBCBFJCD

You can also add HTML overlay view on player if you are strong enough to create such view using HTML.

Answer 4

You can add a image which is transparent from center and colored from border