Video afspelen op iOS4 met het MediaPlayer Framework

Deze zelfstudie is een stapsgewijs overzicht van hoe u het MediaPlayer-framework kunt integreren en kunt werken met de klasse MPMoviePlayerController in iOS4. Met deze kennis kunt u op volledig scherm media afspelen in uw eigen toepassingen of video's weergeven als een subview van een aangepast formaat in uw eigen view controllers. Lees verder voor meer informatie!

Projectinstellingen en overzicht

Deze tutorial gebruikt een eenvoudige applicatie genaamd "BigBuckBunny" om te demonstreren met behulp van het MediaPlayer-framework en de klasse MPMoviePlayerController voor de iOS 4 SDK. Deze app speelt een voorbeeldfragment uit de animatiefilm Big Rem Bunny uit 2008, Creative Commons. Door het demoproject bij dit bericht te downloaden, kun je alle stappen in deze tutorial precies volgen. Als je echter al een iPhone-project hebt waar je je eigen films in wilt afspelen, zou je nog steeds in staat moeten zijn om je eigen code te volgen met slechts kleine aanpassingen aan deze stappen. De download die aan dit bericht is toegevoegd, bevat twee versies van het project: BigBuckBunny-Start moet worden gebruikt als u alle stappen wilt integreren terwijl u doorgaat, en BigBuckBunny-Voltooid is het eindresultaat van deze tutorial.

Stap 1: Importeer het MediaPlayer Framework

CTRL + Klik (of klik met de rechtermuisknop) in de map "Frameworks" in het deelvenster "Groepen en bestanden" in Xcode. kiezen Voeg> Bestaande frameworks toe uit het vervolgkeuzemenu.

Selecteer "MediaPlayer.framework" in de lijst met opties en klik op "Toevoegen".

Stap 2: Importeer het MediaPlayer Framework en Declareer de playMovie-methode

Nu u het mediaspelerkader aan uw project hebt toegevoegd, moet u de code in dat kader daadwerkelijk importeren in de view-controller die verantwoordelijk is voor het afspelen van de film. Ga naar de BigBuckBunnyViewController.h bestand en voeg de volgende regel code onder de UIKit in #importeren lijn:

 #importeren  #importeren  

Deze regel code maakt de view controller op de hoogte van alles wat de MediaPlayer.framework heeft te bieden.

Vervolgens moeten we een instantiemethode van onze view-controller declareren die het afspelen van films activeert. Net boven de @einde statement in het header-bestand, voeg deze regel toe:

 -(IBAction) playMovie: (id) afzender; 

Met onze playMovie methode gedeclareerd, zijn we klaar om te beginnen met het schrijven van onze view controller-implementatiecode.

Stap 3: Implementeer de playMovie-methode

Open de BigBuckBunnyViewController.m het dossier. Implementeer de playMovie-methode met de volgende coderegels:

 -(IBAction) playMovie: (id) afzender NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: filepath]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [self.view addSubview: moviePlayerController.view]; filmPlayerController.fullscreen = YES; [filmPlayerController play];  

Op regel 3 maken we een NSString met daarin het bestandspad naar ons filmbestand. Op regel 4 gebruiken we dat bestandspad om een ​​NSURL te maken voor onze lokale film. Op regel 5 implementeren we dit door de NSURL in de initWithContentURL: methode van de MPMoviePlayerController voorwerp. Merk op hoe we geheugen hebben toegewezen aan de filmspeler op deze regel; dat moeten we later vrijgeven! Op regel 6 voegen we de MPMoviePlayerController-weergave toe aan onze aangepaste weergaveregeling, zodat deze op het scherm verschijnt, op regel 7 specificeren we dat we de video in de modus voor volledig scherm willen afspelen en op regel 8 beginnen we met het afspelen van de film.

Voordat we onze code kunnen testen, moeten we de knop 'Touch Up Inside' van onze knop koppelen aan de playMovie-methode. Om dit te doen, open BigBuckBunnyViewController.xib in Interface Builder. CTRL + Klik (of klik met de rechtermuisknop) op de aangepaste UIButton in het midden van het scherm om de acties voor dit element weer te geven. Sleep van de cirkel naast 'Binnenkant bijwerken' naar het object 'Bestandseigenaar' en selecteer vervolgens de tekst 'playMovie:' die verschijnt. Sla uw voortgang op in Interface Builder voordat u terugkeert naar Xcode.

OPMERKING: u moet playMovie selecteren als het lijkt om deze stap te voltooien. Sla uw wijzigingen op!

Als u het project nu bouwt en debugt, ziet u dat het afspelen van films werkt zoals verwacht wanneer u op de aangepaste UIButton tikt. Echter, vier het nog niet, want we zijn nog niet helemaal klaar.

Zoals eerder vermeld, wijzen we expliciet geheugen toe voor het moviePlayerController-object, maar we hebben dat geheugen nog niet vrijgegeven. Dit is een interessant scenario. We kunnen het object niet expliciet vrijgeven in de methode die we hebben toegewezen, omdat onze film nog steeds wordt afgespeeld op het moment dat deze methode de uitvoering voltooit. Het is ook niet veilig om het object automatisch te laten zien, omdat we niet weten of onze film nog steeds wordt afgespeeld als de autorelease-pool de volgende keer wordt leeggemaakt. Gelukkig is het MPMoviePlayerController-object vooraf gebouwd om dit scenario af te handelen en wordt een melding verzonden met de naam MPMoviePlayerPlaybackDidFinishNotification naar het NSNotificationCenter wanneer het afspelen is voltooid. Om deze kennisgeving te ontvangen, moeten we een 'waarnemer' registreren om op die specifieke melding te reageren. Om dit te doen, wijzigt u onze playMovie methode als volgt:

 NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: filepath]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector (moviePlaybackComplete :) naam: MPMoviePlayerPlaybackDidFinishNotification-object: moviePlayerController]; [self.view addSubview: moviePlayerController.view]; filmPlayerController.fullscreen = YES; [filmPlayerController play]; 

We moeten nu creëren moviePlaybackComplete:, de selector die we net hebben geregistreerd. Voeg het volgende toe onder de playMovie methode:

 - (void) filmPlaybackComplete: (NSNotification *) melding MPMoviePlayerController * moviePlayerController = [notification-object]; [[NSNotificationCenter defaultCenter] removeObserver: self name: MPMoviePlayerPlaybackDidFinishNotification-object: moviePlayerController]; [moviePlayerController.view removeFromSuperview]; [release moviePlayerController];  

Onthoud de "object" -parameter die we ingesteld hebben moviePlayerController in de playMovie methode hierboven? Welk object u ook voor die waarde instelt, wordt later samen met de melding verzonden. Op regel 3 halen we dat object op met de [meldingsobject] instructie en verwijzingen ernaar met een nieuwe MPMoviePlayerController-aanwijzer. Vervolgens, op regel 4, sturen we opnieuw een bericht naar het NSNotificationCenter, dit keer met het verwijderen van de waarnemer die we hebben geregistreerd playMovie. Op regel 8 ruimen we onze custom view-controller op door de moviePlayerController-weergave te verwijderen van onze display en op regel 9 voltooien we het geheugen dat we oorspronkelijk in de playMovie methode.

Op dit punt zou ons implementatiebestand er als volgt uit moeten zien:

 #import "BigBuckBunnyViewController.h" @implementation BigBuckBunnyViewController - (IBAction) playMovie: (id) afzender NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: filepath]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector (moviePlaybackComplete :) naam: MPMoviePlayerPlaybackDidFinishNotification-object: moviePlayerController]; [self.view addSubview: moviePlayerController.view]; filmPlayerController.fullscreen = YES; [filmPlayerController play];  - (void) filmPlaybackComplete: (NSNotification *) melding MPMoviePlayerController * moviePlayerController = [notification-object]; [[NSNotificationCenter defaultCenter] removeObserver: self name: MPMoviePlayerPlaybackDidFinishNotification-object: moviePlayerController]; [moviePlayerController.view removeFromSuperview]; [release moviePlayerController];  - (void) dealloc [super dealloc];  @end 

Gefeliciteerd! U zou nu een werkende filmspeler in uw applicatie moeten hebben. De rest van deze tutorial is gericht op het aanpassen van de speler.

Stap 4: Pas het filmvertoningsformaat aan

Met je werk in de vorige stap kon je films afspelen op volledig scherm. Het grote voordeel van de MPMoviePlayerController-verbeteringen in iOS 4 is echter dat u nu een aangepast weergavegrootte kunt opgeven voor weergave binnen uw eigen beeldcontrollers. Om hiervan te profiteren, wijzigt u de playMovie-methode als volgt:

 [moviePlayerController.view setFrame: CGRectMake (38, 100, 250, 163)]; [self.view addSubview: moviePlayerController.view]; //moviePlayerController.fullscreen = YES; [filmPlayerController play]; 

Op regel 1 maken we een aangepast framegrootte voor het afspelen van films met de CGRectMake functie. De waarden die ik heb ingevoerd zijn overgenomen van Interface Builder en komen overeen met de oorsprong, hoogte en breedte van de aangepaste UIButton die we gebruiken om de film af te spelen. Merk op dat ik ook de opdracht op het volledige scherm heb genoteerd op regel 4.

Als u nu uw projectcode bouwt en gebruikt, moet u zien dat als u op de knop klikt, de video nu wordt afgespeeld in onze aangepaste weergaveregelaar, rechtsboven in de UIButton. Dit werkt goed genoeg, maar wat als je de knop een beetje wilt verplaatsen om de juiste look te vinden? Het is een beetje omslachtig om constant de letterlijke CGRect-waarden te kopiëren. Werk de playMovie-methode bij om dit dynamisch te doen:

 -(IBAction) playMovie: (id) afzender UIButton * playButton = (UIButton *) afzender; NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: filepath]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector (moviePlaybackComplete :) naam: MPMoviePlayerPlaybackDidFinishNotification-object: moviePlayerController]; [moviePlayerController.view setFrame: CGRectMake (playButton.frame.origin.x, playButton.frame.origin.y, playButton.frame.size.width, playButton.frame.size.height)]; [self.view addSubview: moviePlayerController.view]; //moviePlayerController.fullscreen = YES; [filmPlayerController play];  

Op regel 3 hierboven typeren we de parameter "afzender" naar een UIButton-object, omdat we weten dat dit het soort object is dat dit bericht naar onze view-controller stuurt. Vervolgens hebben we rechtstreeks toegang tot dit object om de X- en Y-oorsprong van de knop te krijgen, evenals de breedte en hoogte van de knop. Met de code hierboven geïmplementeerd, zijn we vrij om de UIButton overal op het canvas te verplaatsen en hoeven we ons geen zorgen te maken over het voortdurend updaten van onze CGRectMake-functieaanroep.

Een woord over schaalmodus

Wanneer u video in een aangepaste rechthoek weergeeft, moet u soms de scalingMode eigenschap van het object MPMoviePlayerController. Als u deze eigenschap instelt, wordt bepaald hoe het filmbeeld wordt aangepast om de afspeelgrootte te vullen die u hebt gedefinieerd. De beschikbare instellingen voor de schaalmodus zijn als volgt:

  • MPMovieScalingModeNone
  • MPMovieScalingModeAspectFit
  • MPMovieScalingModeAspectFill
  • MPMovieScalingModeFill

Elk van de bovenstaande opties werkt zoals u zou verwachten, met MPMovieScalingModeAspectFill en MPMovieScalingModeFill waarschijnlijk de twee meest gebruikte modificaties. De standaard schaalmodus is MPMovieScalingModeAspectFit.

Om te experimenteren met deze eigenschap in onze code, voeg je de volgende regel in vlak voor de [filmPlayerController spelen] uitspraak:

 moviePlayerController.scalingMode = MPMovieScalingModeFill; 

Je zult zien dat onze video nu alle beschikbare ruimte in de afspeelrechthoek vult.

Conclusie

Deze tutorial heeft een fundamentele inleiding gegeven over het gebruik van de klasse MPMoviePlayerController met het MediaPlayer-framework. De klasse MPMoviePlayerController heeft aanvullende opties die we hier niet hebben behandeld, maar ik zal de verkenning ervan als een oefening voor de lezer achterlaten. Met de basis van deze tutorial op zijn plaats, zou je in staat moeten zijn om zelf te gaan experimenteren! Laat eventuele feedback of vragen achter in de opmerkingen hieronder. Stuur gerust ook vragen of opmerkingen via mijn persoonlijke twitter @markhammonds of het officiële Mobiletuts + twitter-account @mobtuts. Bedankt voor het lezen en veel succes met je eigen projecten!