Add Custom Controls to MoviePlayer

Question

I am trying to figure out how to add a custom control to the iPhone MoviePlayer. For an example of what I am trying to do see the following image.

Answer 1

I have not implemented ALMoviePlayerController but it seems to provide a succinct and sufficient solution to your problem.

From git repo:

"A drop-in replacement for MPMoviePlayerController that exposes the UI elements and allows for maximum customization"

https://github.com/alobi/ALMoviePlayerController

Answer 2

This sample application that Apple provides should help. From the description:

Demonstrates how to use the Media Player Framework to play a movie full-screen. The sample contains code to configure the movie background color, playback controls and scaling mode via the built-in Settings application. Also shows how to draw custom overlay controls on top of the movie during playback.

Answer 3

Folks here have probably also seen in various other blog posts the following approach to "get the movie-player window" -- at index = 1. Though this approach (see snippet below) is also possibly a bit "fragile", it's likely a bit "safer" since it does not make use of any undocumented or non-public methods in MPMoviePlayerController.

Note also that you should wait until you get a MPMoviePlayerContentPreloadDidFinishNotification, so that the movie-player window (idx=1) will indeed exist ;-)

Note I'm also assigning an arbitrary (integer-valued) view "tag" to myOverlayView here -- so that I can re-use the view when possible, i.e. check if it's already been added to the parent player window.

anyhoo, here's the relevant code-snippet:

// use slight "hack" to get our (parent) movie-player window, should always (?) be the UIWindow at index = 1
//
UIWindow *moviePlayerWindow= [[[UIApplication sharedApplication] windows] objectAtIndex:1];

myOverlayView.center = CGPointMake(
                            moviePlayerWindow.bounds.size.width - (myOverlayView.bounds.size.height / 2) - myOverlayView.display_origin.y,
                            moviePlayerWindow.center.y
                                  ); // center our overlay-view

myOverlayView.hidden = NO; // and show it

if( [moviePlayerWindow viewWithTag: MY_OVERLAY_VIEW_TAG] == nil ) {
    // haven't added our overlay-view as a sub-view to the main MoviePlayer window yet... so do that now
    myOverlayView.tag = MY_OVERLAY_VIEW_TAG;
    [moviePlayerWindow addSubview: myOverlayView];
}
[moviePlayerWindow bringSubviewToFront: myOverlayView]; // in any case, bring it to the foreground

Answer 4

I found the BEST way to do this!

You create your movie player like normal and then do the following:

id vvController = [theMovie videoViewController];
[[vvController _overlayView] addSubview:mainView];

Where 'mainView' is your custom overlay. Doing this makes it so your custom overlay will show and hide with the normal overlays as they are now one in the same!

Please note that this is still using the standard frameworks, but it is undocumented in the frameworks. So it should be 100% appstore safe, but "could" change without notice from Apple in later frameworks.

Answer 5

I recommend VideoPlayerKit. Supports streaming, fullscreen, AirPlay.

https://github.com/ign/VideoPlayerKit