04.01.2010

20:46

Youtube Videos in der eigenen App

Standardmäßig werden Youtube Videos am iPhone in der gleichnamigen App abgespielt. Möchte man nun Youtube Videos in eine App einbinden, birgt dies einen enormen Nachteil hinsichtlich der Usability: Die App wird verlassen und beendet.

Mit nur zwei Tricks ist es jedoch möglich dies zu verhinden und Videos mit der integrierten MoviePlayer Komponente abzuspielen.

Am Beispiel eines Feedreaders für einen Youtube Channel möchte ich diese Tricks im Folgenden erklären.

XML-Feed

Die Videos und URLs eines Youtube Channels können über einen RSS-Feed eingelesen werden. Dazu verwenden man die Klasse NSXMLParser. Da diese Funktion u.a. durch SampleCodes sehr gut dokumentiert ist, werde ich darauf nicht näher eingehen.

Video in der App abspielen

Um die Videos in der App abzuspielen reicht es, die Youtube Videos über eine UIWebView zu öffnen.

Dabei muss das Video lediglich über den Embed-Code von Youtube in eine UIWebView gebettet und darüber geöffnet werden. Durch dieses Vorgehen wird die App nicht verlassen um das Video abszuspielen.

Dazu wird folgender Code eingebunden um den Embed-Code in der UIWebView anzuzeigen:

webView.delegate = self;
NSString *htmlString = [NSString stringWithFormat:@"<pre><code><html><head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no, width = 212"/></head>
<body style="background:#F00;margin-top:0px;margin-left:0px">
<div><object width="212" height="172">
<param name="movie" value="%@"></param>
<param name="wmode" value="transparent"></param>
<embed src="%@"
type="application/x-shockwave-flash" wmode="transparent" width="%f" height="%f"></embed>
</object></div></body></html></pre></code>", url, url, width, height, nil];
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://youtube.com"]];

Tippt ein User nun auf die UIWebView, wird das Video innerhalb der App abgespielt, ohne die App zu beenden.

Usability verbessern

Diese Funktionalität ist zwar praktisch, aber kaum anwendbar, da es eine enorme Einschränkung ist, dass ein User nur über die UIWebView das Video öffnen kann.

Viel praktischer wäre es, wenn der User das Video beispielsweise über die Methode didSelectRowAtIndexPath eines UITableViewControllers öffnen könnte.

Genau diesen Schritt ermöglicht folgender Code:

- (UIButton *)findButtonInView:(UIView *)view {
    UIButton *button = nil;

    if ([view isMemberOfClass:[UIButton class]]) {
        return (UIButton *)view;
    }

    if (view.subviews && [view.subviews count] > 0) {
        for (UIView *subview in view.subviews) {
            button = [self findButtonInView:subview];
            if (button) return button;
        }
    }

    return button;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
    UIButton *b = [self findButtonInView:[cell icon]];
    [b sendActionsForControlEvents:UIControlEventTouchUpInside];
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}

Dabei muss beachtet werden, dass die UIWebView mit dem Embed-Code innerhalb der UITableViewCell als Objekt icon instanziiert wird.

Das wars. Nun wird beim Tippen auf eine Zeile der Liste das zugehörige Video in der App geöffnet.

Technische Details

Für alle, die wissen möchten, was genau passiert: Es ist schon ein bisschen Tricky.

Zu allererst habe ich eine Methode geschrieben, die alle Subviews eines Elements zurückliefert. Wird diese Methode auf auf die UIWebView angewandt bekommt man folgendes Ergebnis. Innerhalb der UIWebView gibt es eine UIWebDocumentView. Das war mir vorher schon klar. Die Überraschung war allerdings die YouTubePlugInView innerhalb dieser. Eine undokumentierte View zur Ansicht von Youtube Seiten, also. Diese besteht aus zwei Bildern, vier weiteren unspezifizierten UIViews und, richtig, einem UIButton.

Dabei lag es dann natürlich nahe, den Button einfach mal zu triggern. Gesagt getan, und die ganze Sache funktionierte genau so, wie ich mir es gewünscht habe.

Viel Spaß mit dem Code.

Dominik SchönPermalinkTrackback-Link
Tags: Nähkästchen
Views: 54

0 Kommentare

Mein Kommentar

Zurück

Letzte Kommentare

flash suckt: 12.02.2010 08:35
Wird nicht gehen: 30.01.2010 00:07