Playing youtube videos on phonegap

Question

I am developing an application using phonegap in which a video section shows list of youtube videos retrieved using youtube jsonc api. I would like the video to be played inside the application when its link is clicked, so that when the video is closed, my application interface is shown again. Youtube apis give rstp:// and http:// links for the videos, but I haven't been able to play the videos inside the application. Once that works, I would like to port it over to blackberry and other devices too, so a phonegap specific solution is highly preferred.

Solution

On a client project that we've worked on, for iPhone, we had to take the YouTube link and change it over to an <embed> tag. Here is how it's done:

function getYouTubeLink(url) {
  var isYouTube = RegExp(/\.youtube\.com.+v=([\w_\-]+)/i);
  var r = isYouTube.exec(url);
  if (r && r[1]) {
    var video = 'http://www.youtube.com/v/' + url + '&hl=en&fs=1&';
    var youtube =  '<embed src="' + video + '" type="application/x-shockwave-flash"' + 
      ' allowscriptaccess="always"' + 
      ' allowfullscreen="true" width="90" height="60"></embed>';
    return youtube;
  }
}

iOS PhoneGap handles this pretty well. For Android, simply opening up an http:// YouTube link should be enough for the Android OS to recognize it and divert the user to the native YouTube application.

For BlackBerry... o geez, I don't know. Something tells me it wouldn't work too well. Forgive me, I am a jaded BlackBerry developer bearing too many BlackBerry-induced scars.

Good luck!

Comments

[Dofs]

You could also use ChildBrowser-plugin to open a new window with the location of the youtube url.

[Samnan]

Trying the above. Let's see how it goes

[Samnan]

Actually,'simply opening up the link' is the real problem. Do I use Phonegap.exec(..) or some other function within the javascript code to open the link.. and will it return control to my application once the video is closed?

[fil maj]

For Android, simply open the link with a regular <a href="http://www.youtube.com/...">Click me</a> anchor tag, or by calling window.location = 'http://www.youtube.com/...'; from JavaScript.