In-app youtube data API

[Cameron Perry]

Has anyone had any success getting YouTube vids to play on the iPhone/
iPod?
I tried - quickly - just load one of the RTSP 3gp files returned by
the api in Safari to see if the media player would come up... Nope. I
was hoping that would be the easy way out. Which leads me to Objective C

I found this page from YouTube API Blog: http://apiblog.youtube.com/2009/02/youtube-apis-iphone-cool-mobile-apps.html
but it deals with Obj C. Be it that I know nothing about programming
Obj C I'm not sure how this applies to trying to apply the same
principles to PhoneGap.

Any input on the subject is appreciated.

Thanks!
Cameron

[Shazron Abdullah]

Just put the embed code for the youtube video in your app in the html
page (and style and size it however you want).
eg

<object width="200" height="200"><param name="movie" value="http://www.youtube.com/v/J---aiyznGQ&hl=en&fs=1&
"></param><param name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/J---aiyznGQ&hl=en&fs=1&
" type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="200" height="200"></embed></object>

If youtube has a h.264 version available the media player control
should show a Play arrow button.
When the video is done playing it will bring it back to your app.

If you are on OS 3.0, you could use a HTML 5 <video> tag also.

Shaz

[Cameron Perry]

That's exactly what I was looking for. That's so much easier than I
thought it would be. The thumbnail isn't the prettiest, and I'm
wondering if there's a way to customize it with something a little bit
nicer and higher quality.

Thanks!!
~Cameron

[Shazron Abdullah]

With the <video> tag you can do just that I believe, with a "poster" attribute.

View this in mobile safari www.youtube.com/html5

[Shazron Abdullah]

Further information regarding <video> tags, supported formats, etc for
iPhone webview:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW1

[Cameron Perry]

I tried copy/paste that page's source into an empty PG project and it doesn't work the way it does in mobile Safari. To clarify - the page loads properly but the direct links to the videos do not. Could it be because PG doesn't know what to do with the rtsp:// link protocol, whereas Safari obviously does? 

The video thumbnails on the mobile youtube are all linked as:

<a href="rtsp://......"><img src="/path/to/thumbnail"></a>

So I'm wondering if that's the issue - that PG just doesn't know what to do when it sees href="rtsp://.....". 

I also noticed that all the other links will open in a new Safari window. I'm still pretty unfamiliar with PG, so that might be how it's supposed to work, though I was half expecting to open the link in the PG app.

~Cameron

[Cameron Perry]

And to follow-up from my previous email - at the bottom of the link you provided, it looks like Safari doesn't support RTSP. Nor does YouTube Mobile seem to actually use the <video> tag, though I wouldn't put it past them to change the page's source code depending on the user agent. But even then - switching agents to the iPhone OS version of Safari still displays the <object> containing the flash video. So beyond using the standard <object> param, I'm a bit lost as to how m.youtube.com actually does it on the iPhone Safari. Maybe I'm just missing something else blaringly obvious.

~Cameron

[Shazron Abdullah]

iPhone does not support the rtsp protocol. With 3.0 it does support
http streaming (more info on that link I gave you, but the format
would be mpeg-ts i believe). Youtube does not use the video tag except
for that trial on that special page. It's pretty simple - the iPhone
will only play youtube videos that have the h.264 version available.