{"id":2082,"date":"2010-02-06T21:21:34","date_gmt":"2010-02-06T20:21:34","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=2082"},"modified":"2010-02-08T09:52:16","modified_gmt":"2010-02-08T08:52:16","slug":"t024-aggiungiamo-i-video-alle-nostre-applicazioni","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t024-aggiungiamo-i-video-alle-nostre-applicazioni\/","title":{"rendered":"T#024 – Aggiungiamo i video alle nostre applicazioni"},"content":{"rendered":"

\"T024<\/a> Oggi vedremo come inserire un video all’interno della nostra applicazione. Nello specifico vedremo tre modalit\u00e0 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.<\/p>\n

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.<\/p>\n

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\u00e0 una finestrella come quella mostrata nell’immagine seguente:<\/p>\n


\n\"MediaPlayer.Framework\"<\/a>
\n<\/center><\/p>\n

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:<\/p>\n

\r\n#import \r\n<\/pre>\n
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:<\/p>\n
\r\n#import \r\n#import \r\n\r\n@interface myVideoViewController : UIViewController {\r\n    IBOutlet UIWebView *webView;\r\n}\r\n\r\n@property (nonatomic, retain) IBOutlet UIWebView *webView;\r\n\r\n-(IBAction)avviaVideo:(id)sender;\r\n-(IBAction)avviaVideoYouTube:(id)sender;\r\n\r\n@end\r\n<\/pre>\n
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.<\/p>\n
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.<\/p>\n
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”:<\/p>\n
\r\n\r\n\r\n\r\n\r\nwww.devAPP.it<\/title>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\t<object width=\"425\" height=\"344\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/YQdgr1KtDFY&hl=it_IT&fs=1&\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><embed src=\"http:\/\/www.youtube.com\/v\/YQdgr1KtDFY&hl=it_IT&fs=1&\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"><\/embed><\/object>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<p>Questa sar\u00e0 la pagina HTML che verr\u00e0 mostrata nella webView, ovviamente nulla vi vieta di puntare ad una pagina online presente in rete \ud83d\ude09<\/p>\n<p>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:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IB.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IB.png\" alt=\"T024 - Aggiungiamo video alle nostre applicazioni (Interfaccia Utente)\" title=\"t024_IB\" width=\"320\" height=\"502\" class=\"aligncenter size-full wp-image-2087\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IB.png 320w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IB-191x300.png 191w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Questi elencati sono gli elementi indispensabili per il tutorial, tutto il resto sono solo elementi decorativi:<\/p>\n<ul>\n<li>N. 2 UIButton<\/li>\n<li>N. 1 UIWebView<\/li>\n<\/ul>\n<p>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\u00f9 chiaro il programma in esecuzione.<\/p>\n<p>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.<\/p>\n<p>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\u00e0 di visualizzare i video nella nostra App.<\/p>\n<p>Prima di tutto aggiungiamo la seguente linea di codice in modo tale da poter usare le propriet\u00e0 (dichiarate prima) della webView:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n@synthesize webView;\r\n<\/pre>\n<p>“Scommentiamo” quindi il metodo viewDidLoad e modifichiamo il codice come segue:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n\t\r\n\t\/\/[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@\"filmato\" ofType:@\"html\"]isDirectory:NO]]];\r\n\t\/\/[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:test isDirectory:NO]]];\r\n\r\n\tNSString *strIndirizzo =[[NSBundle mainBundle] pathForResource:@\"filmato\" ofType:@\"html\"];\t\r\n\tNSURL *url = [NSURL fileURLWithPath:strIndirizzo isDirectory:NO];\r\n\tNSURLRequest *request = [NSURLRequest requestWithURL:url];\r\n\t[webView loadRequest:request];\r\n\t[webView setScalesPageToFit:YES];\r\n}\r\n<\/pre>\n<p>Questo far\u00e0 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\u00f2 all’applicazione senza di fatto uscirne.<\/p>\n<p>Aggiungiamo ora il codice del primo metodo “avviaVideo” grazie al quale, premendo l’apposito tasto, partir\u00e0 sul player dell’iPhone il video integrato nel nostro progetto (anche in questo la visualizzazione del video non ci far\u00e0 uscire dalla nostra applicazione):<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n-(IBAction)avviaVideo:(id)sender{\r\n\tNSString *resourcePath = [[NSBundle mainBundle]pathForResource:@\"filmato\" ofType:@\"m4v\"];\r\n\tNSURL *link = [NSURL fileURLWithPath:resourcePath];\r\n\tMPMoviePlayerController *movie = [[MPMoviePlayerController alloc] initWithContentURL:link];\r\n\t\r\n\t[movie setBackgroundColor:[UIColor blackColor]];\r\n\t[movie setScalingMode:MPMovieScalingModeAspectFit];\r\n\t[movie play];\r\n}\r\n<\/pre>\n<p>Il vantaggio i caricare i video nel progetto \u00e8 che i video saranno visibili ovviamente anche senza connessione, lo svantaggio \u00e8 che le app in questo modo peseranno molto di pi\u00f9.<\/p>\n<p>Ultima modalit\u00e0 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\u00f9, neanche al termine della visualizzazione del video (un chiaro svantaggio di questo metodo):<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n-(IBAction)avviaVideoYouTube:(id)sender {\r\n\tNSURL *url = [NSURL URLWithString:@\"http:\/\/www.youtube.com\/watch?v=YQdgr1KtDFY\"];\r\n\t[[UIApplication sharedApplication] openURL:url];\r\n}\r\n<\/pre>\n<p>Sia questa ultima modalit\u00e0 che quella tramite webView necessitano di connessione attiva per la visione del video che di fatto non \u00e8 all’interno del progetto, rendendolo in questo modo molto pi\u00f9 leggero, ma legato alla presenza della connettivit\u00e0. Star\u00e0 a voi, ora, scegliere il metodo migliore per implementare uno o pi\u00f9 video nelle vostre applicazioni.<\/p>\n<p>Ecco uno screenshot dell’app presentata in esecuzione:<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IS1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IS1.jpg\" alt=\"t024 - Inseriamo i video all'interno delle nostre applicazioni\" title=\"t024_IS\" width=\"320\" height=\"480\" class=\"aligncenter size-full wp-image-2095\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IS1.jpg 320w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/02\/t024_IS1-200x300.jpg 200w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oggi vedremo come inserire un video all’interno della nostra applicazione. Nello specifico vedremo tre modalit\u00e0 differenti che…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[103,5,4,14,1,104],"class_list":["post-2082","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-mediaplayer","tag-objective-c","tag-programmazione","tag-sdk","tag-tutorial-pratici","tag-video"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=2082"}],"version-history":[{"count":13,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2082\/revisions"}],"predecessor-version":[{"id":2104,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2082\/revisions\/2104"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=2082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=2082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}