Oggi vedremo come inserire un video all’interno della nostra applicazione. Nello specifico vedremo tre modalità differenti che ci permetteranno di sfruttare questa funzione multimediale dell’iPhone: avvieremo un video salvato all’interno del nostro progetto, uno disponibile in una pagina web html e infine vedremo come visualizzare un video YouTube direttamente nell’applicazione nativa presente su tutti gli iPhone.

Partiamo con il nostro tutorial aprendo Xcode e creando un nuovo progetto. Dall’elenco dei template disponibili scegliamo “View-based Application” e proseguiamo. Diamo ora un nome alla nostra applicazione, ad esempio “myVideo”, scegliamo la posizione dove salvare il progetto e andiamo avanti.

Per prima cosa dobbiamo importare un nuovo framework: MediaPlayer. Per farlo clicchiamo col pulsante destro del mouse su “Frameworks” in “Groups & Files”, quindi su “Add” e successivamente su “Existing Frameworks…”. Si aprirà una finestrella come quella mostrata nell’immagine seguente:

Da qui selezionate, come mostrato, MediaPlayer.framework e premete “Add”. Non abbiamo ancora finito con il framework, dobbiamo infatti ancora aprire il file “myVideoViewController.h” (se avete chiamato il progetto come noi “myVideo”) e aggiungere la seguente riga di codice:

#import 

Ora potremo usare tutto quanto offerto da questo framework. Rimaniamo nel file di intestazione .h e modifichiamo il suo codice in modo da ottenere quanto riportato qui sotto:

#import 
#import 

@interface myVideoViewController : UIViewController {
    IBOutlet UIWebView *webView;
}

@property (nonatomic, retain) IBOutlet UIWebView *webView;

-(IBAction)avviaVideo:(id)sender;
-(IBAction)avviaVideoYouTube:(id)sender;

@end

Come vedete non abbiamo fatto altro che dichiarare un oggetto IBOutlet (che collegheremo al rispettivo disegnato tramite Interface Builder) di tipo UIWebView chiamato webView. In queste poche righe di codice abbiamo inoltre dichiarato 2 metodi che ci permetteranno di avviare il video in due modi diversi.

Aggiungiamo ora un video al nostro programma, nel nostro caso “filmato.m4v”, trascinandolo semplicemente nella cartella “Resources” e facendo attenzione di mettere la spunta su “Copy items into destination group’s folder (if needed)” in modo tale che venga di fatto copiato il file nella cartella del progetto.

Create ora un file HTML con al suo interno il seguente codice, chiamatelo “filmato.html” e importatelo nel progetto allo stesso modo di come avete appena fatto con il video “filmato.m4v”:

Questa sarà la pagina HTML che verrà mostrata nella webView, ovviamente nulla vi vieta di puntare ad una pagina online presente in rete 😉

Ora che abbiamo tutto l’occorrente all’interno del progetto possiamo aprire Interface Builder facendo doppio click sul file “myVideoViewController.xib” e disegnare quindi l’interfaccia utente, simile a quella mostrata in figura qui in basso:

Questi elencati sono gli elementi indispensabili per il tutorial, tutto il resto sono solo elementi decorativi:

• N. 2 UIButton
• N. 1 UIWebView

Come vedete noi abbiamo personalizzato l’aspetto grafico del primo pulsante inserendo un’immagine al suo interno e allo stesso modo abbiamo aggiunto UILabel e altri elementi per rendere più chiaro il programma in esecuzione.

Inseriti gli elementi, cliccate su “File’s Owner” e dalla finestra “My Video View Controller Connections” collegate webView alla UIWebView appena inserita e i due metodi (Received Actions) “avviaVideo” e “avviaVideoYouTube” ai due pulsanti, facendo attenzione a selezionare “Touch Up Inside” nella finestrella che compare al rilascio del mouse.

Salviamo e chiudiamo Interface Builder. Apriamo quindi il file di implementazione “myVideoViewController.m” e andiamo a scrivere il codice vero e proprio che ci permetterà di visualizzare i video nella nostra App.

Prima di tutto aggiungiamo la seguente linea di codice in modo tale da poter usare le proprietà (dichiarate prima) della webView:

@synthesize webView;

“Scommentiamo” quindi il metodo viewDidLoad e modifichiamo il codice come segue:

- (void)viewDidLoad {
    [super viewDidLoad];
	
	//[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"filmato" ofType:@"html"]isDirectory:NO]]];
	//[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:test isDirectory:NO]]];

	NSString *strIndirizzo =[[NSBundle mainBundle] pathForResource:@"filmato" ofType:@"html"];	
	NSURL *url = [NSURL fileURLWithPath:strIndirizzo isDirectory:NO];
	NSURLRequest *request = [NSURLRequest requestWithURL:url];
	[webView loadRequest:request];
	[webView setScalesPageToFit:YES];
}

Questo farà in modo di caricare la pagina HTML aggiunta precedentemente nel Bundle dell’app, con all’interno il codice che punta al video (tra i Tag “object”). Ovviamente nessuno ci vieta, come detto poco fa, di puntare ad una pagina web presente su internet. Durante l’esecuzione, dopo aver visualizzato il video, si tornerò all’applicazione senza di fatto uscirne.

Aggiungiamo ora il codice del primo metodo “avviaVideo” grazie al quale, premendo l’apposito tasto, partirà sul player dell’iPhone il video integrato nel nostro progetto (anche in questo la visualizzazione del video non ci farà uscire dalla nostra applicazione):

-(IBAction)avviaVideo:(id)sender{
	NSString *resourcePath = [[NSBundle mainBundle]pathForResource:@"filmato" ofType:@"m4v"];
	NSURL *link = [NSURL fileURLWithPath:resourcePath];
	MPMoviePlayerController *movie = [[MPMoviePlayerController alloc] initWithContentURL:link];
	
	[movie setBackgroundColor:[UIColor blackColor]];
	[movie setScalingMode:MPMovieScalingModeAspectFit];
	[movie play];
}

Il vantaggio i caricare i video nel progetto è che i video saranno visibili ovviamente anche senza connessione, lo svantaggio è che le app in questo modo peseranno molto di più.

Ultima modalità di visualizzazione presentata, permette, alla pressione del relativo UIButton, di avviare un video di YouTube direttamente dall’applicazione nativa, appunto YouTube, uscendo quindi dalla nostra applicazione per non tornarci più, neanche al termine della visualizzazione del video (un chiaro svantaggio di questo metodo):

-(IBAction)avviaVideoYouTube:(id)sender {
	NSURL *url = [NSURL URLWithString:@"http://www.youtube.com/watch?v=YQdgr1KtDFY"];
	[[UIApplication sharedApplication] openURL:url];
}

Sia questa ultima modalità che quella tramite webView necessitano di connessione attiva per la visione del video che di fatto non è all’interno del progetto, rendendolo in questo modo molto più leggero, ma legato alla presenza della connettività. Starà a voi, ora, scegliere il metodo migliore per implementare uno o più video nelle vostre applicazioni.

Ecco uno screenshot dell’app presentata in esecuzione: