Friday, December 28, 2012

Dynamic youtube video in phonegap


Get video url like: 
http://www.youtube.com/watch?v=l32LjEtTUkY
http://www.youtube.com/embed/l32LjEtTUkY
l32LjEtTUkY

Create function like below:

function Loadvideo(catvideo){

//Get video ID from catvideo variable.
var videoid= catvideo.substring(catvideo.lastIndexOf('=')+1);
if(videoid == catvideo){
        var videoid= catvideo.substring(catvideo.lastIndexOf('/')+1);
}


//after getting video id you can display video in any HTML elements.
if(catvideo != ""){
           $('.cat_video').html('<iframe id="ytplayer" type="text/html" width="170" height="110" src="http://www.youtube.com/embed/'+videoid+'" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>');
}
else{
         $('.cat_video').html('');
}
}


Call Loadvideo:

//store video id in local variable:
video1="http://www.youtube.com/watch?v=LcES5nIbMkk";    OR
video2="http://www.youtube.com/embed/LcES5nIbMkk";    OR
video3="LcES5nIbMkk";

Loadvideo(catvideo1);


cheers you can see the video in cat_video element.