API PLAYER FOR YOUTUBE VIDEOS

 Watch the page "api-player.html" 
http://http://play-videos.url.ph/1603/api-player1.html



The following lines from "api-player1.html" show how to make:
-----------------------------------------------------------------------------------------------------
1 - Videos clips play continuously one after another.
2 - The video clips will be ignored if Youtube does not allow them to be embedded into your website.
-----------------------------------------------------------------------------------------------------
var player;
wi = '' + 812;
hi = '' + 516;

function onYouTubePlayerAPIReady() {
vId = vid[1]
player = new YT.Player('player', {
width: wi,
height:hi,
videoId: vId,
playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
events: {
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}

function onPlayerStateChange(event) { //  play clips continuously
Sta = event.data;
if (Sta == 0) {
nextVideo();
}
}

function nextVideo(){
if(jj <= last){jj=jj+1};
if (jj > last){jj=1};
showVid(jj);
}

function onPlayerError(error) //  eliminate nonplayable clips
{
if ( error )
{nextVideo();}
}

function showVid(num){
window.scrollTo(0,0);
jj = num;
document.getElementById('videoTitle').value = jj +' / '+ last + ' videos : '
+ tit[jj];
ide = vid[num];
player.loadVideoById(ide, "large");
}

-----------------------------------------------------------------------------------------------------------
You can  copy the following entire source code. Open Notepad, paste the code to a new file to create html file on your computer. Then try this web page using FireFox or Chrome.
-----------------------------------------------------------------------------------------------------------
SOURCE CODE OF "api-player.html"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>API Player</title>
  <style>  
  body{
  padding:0px; margin:0px; background-color:#999;
  font-family:Arial; font-size:12px;
  }
  a {
  text-decoration:none; color:blue;
   }
  a:hover {
  text-decoration:underline; color: #0099ff; 
  }
  .menu{
  font-weight:bold; background-color:#3399CC; padding:4px; color:#99CCFF;
  }
  .curPage{
  font-weight:bold; background-color:#CCFFFF; padding:4px; color:black;
  }  
  </style> 
  </head>
 
  <body onload='init()'>
  <div align="center">
  <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player" style="margin-top:1px"></div>
    <br>
    <input id="videoTitle" type="text" value="" 
    style="text-align:center;width:980px;color:white;background-color:#1B1B1B; 
    border:0px;font-weight:normal;padding:4px;">
    <br>
       
  <div id="menu" style="text-align:center;width:970px;background-color:#333333;
  padding:5px;">  
         
    <input type="button" id="btnStart" value=" Start "  
    onclick ="showVid(1)" style="background-color:#DDD">
         
    <input type="button" value="Back"  
    onclick ="backVideo();" style="background-color:#DDD">
     
    <input type="button" value="Next" 
    onclick="nextVideo()" style="background-color:#DDD">       
  </div>  <!--end of control menu -->
  
  <div style="padding:4px;width:972px;background-color:#1B1B1B;color:white;font-family:'Times New Roman';font-size:13pt"> 
 <i><b>API PLAYER SIMPLE&nbsp; 
 (If this page is ON PC: Use FFox, Chrome; ON NET: Opera, FFox, Chrome)</b></i>
 </div>
  <br>
  <div id='list1' style="width:600px;height:380px;border:1px gray solid;overflow:auto;
  text-align:left;background-color:#eee;line-height:150%">
  </div>
  <br>
  <input type="button" class="menu" value="My Blog" onclick="goURL(
  'http://phanhung20.blogspot.com/')" style="width:15%"
  onmouseover="this.style.backgroundColor = '#0066CC'"
  onmouseout ="this.style.backgroundColor = '#3399CC'"> 
  <br><br> 
  </div>   <!--center-->
  
  <script>
  
  jj = 1; Sta = -1;  
    
  normalW = '980';
  normalH = '551'
  var player;
  startvid = 'otPNwTrva0I';
  var jj = 0;  
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  function onYouTubePlayerAPIReady() {  
        player = new YT.Player('player', {
            width: normalW,
            height:normalH,
            videoId: startvid,
            playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'showsearch': 0, },
            events: {
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError        
            }
        });    
  }
   
  function onPlayerError(error)
    {
        if ( error )
            {nextVideo();}
    }
 
  function onPlayerStateChange(event) {
        Sta = event.data;        
        if (Sta == 0) {
        nextVideo();
        }        
  }
    
  function backVideo(){
      len = vid.length -1;
      if(jj>=2){jj=jj-1;showVid(jj);}
      if (jj==1){showVid(jj);alert("Begin Of List");}
      }
                  
  function nextVideo(){            
      if(jj <= last){jj=jj+1};
      if (jj > last){jj=1};
      showVid(jj);
      }    
      
  function showVid(num){
    window.scrollTo(0,0);    
    jj = num;
    document.getElementById('videoTitle').value = jj +' / '+ last + 
    ' videos : ' + tit[jj];   
    ide = vid[num];
    player.loadVideoById(ide, "large");
    }

  //Creating three arrays
  tit = []; vid = []; dur = []; 
  
   function t(ti){
      tit.push(ti);
      }
  function v(vi){
      vid.push(vi);
      }
  function d(du){
      dur.push(du);
      }
           
  function init(){
  last = vid.length -1;  
  document.getElementById('videoTitle').value = jj +' / '+ last + ' videos : '
  + tit[jj];
   
    st = "";
    for(ii=1;ii<=last;ii++){
      ima = '<img src="http://img.youtube.com/vi/'+ vid[ii] + 
        '/default.jpg" width="80" height="60"><br>';
      xx = '<li><a href="#" onclick="showVid('+ ii +');return false;">'+
      tit[ii]+ '</a></li><br>';
      st = st + ima + xx;
    }
   st = '<ol>' + st + '</ol>';
   document.getElementById('list1').innerHTML = st;      
 }
 
 function goURL(ur){
  window.location = ur;
  }                  
  
  ////////// YOU CAN ADD MORE CLIPS ANYWHERE WITHIN THIS LIST
  ///////////---- Top Border of VIDEO LIST ----//////////////
  
t("Lección de perseverancia - Richard Clayderman \"El Condor Pasa\"");
v("I5NoGfzm73A"); d(204);

t("LA PLAYA (The Beach) - Carmen Cavallaro");
v("3vUDrhA8knI"); d(140);

t("Stranger on the shore // Note: DON'T WORRY this video will be ignored");  
// this video can't be shown and will be skip 
v("Cg79JnJGcws"); d(162);

t("101 STRINGS ORCHESTRA - SCARBOROUGH FAYRE");
v("Hk4tVF_EbdM"); d(151);

t("101 STRINGS ORCHESTRA - AUTUMN LEAVES");
v("FnDVxArSLfk"); d(238);     

t("101 STRINGS ORCHESTRA - THE SOUND OF SILENCE");
v("RWRKkBklg0o"); d(209);

t("موسيقى زهر اللوز الرومانسية جيتار اسباني Besame Mucho by Francisco Garcia HD");
v("D3EDrrcRnDg"); d(189);

t("MEMORIES - FRANK MILLS");
v("Sjav21i63Vw"); d(164);

t("Tommy Garrett & His 50 Guitars - Love Me With All Your Heart");
v("gd6ynux236I"); d(155);

t("Ray Conniff-Hey");
v("8tAY5Svy_rU"); d(190);

t("ROMANTIC PIANO, CHIQUITITA , ABBA, RELAXING, INSTRUMENTAL, HD");
v("lHKVT696NGM"); d(247);

t("ABBA-FERNANDO {1976 WITH LYRICS}");
v("sQJ4ATkPJP8"); d(217);

t("ABBA - The Winner Takes It All Subtitulada En Español");
v("NknFalv-iss"); d(255);

t("GOODBYE ! ADIEU ! ZEGNAJCIE ! \"Hasta manana\" (going on vacation)");
v("aAbQxRMGf-Q"); d(196);

t("ABBA : Dancing Queen (Live Australia '77) HD");
v("-53YYpbZ8BI"); d(273);

t("Billy Vaughn - Fernando");
v("Xa20C21E068"); d(226);

t("GIOVANNI MARRADI - You Don't Have To Say You Love Me");
v("HlbM0_hzAVs"); d(165);

t("Orquesta Los Romanticos De Cuba Parte 5");
v("T7CDuwSaE94"); d(182);

t("Besame Mucho CUBA!");
v("C-0geZkFHKE"); d(229);

t("april in portugal");
v("40unjfSEOE8"); d(204);

t("Richard Clayderman Arrivederci Róma.wmv");
v("OEn0_kj91aU"); d(172);

t("Yesterday ( Giovanni Marradi )");
v("65hmwFf_Be8"); d(217);

t("Blue Moon (Franck Pourcel)");
v("kYMaGHNSprg"); d(159);

t("What a wonderful world (piano)- Richard Clayderman");
v("B5Btxmtna1o"); d(241);

t("Green Sleeves By Billy Vaughn");
v("LGCTyl49qIw"); d(167);

t("STRANGERS IN THE NIGHT [INSTRUMENTAL]");
v("GyEksqCKx2o"); d(203);

t("Klaus Wunderlich - Till");
v("-yfB-wDhs3U"); d(189);

t("Ray Anthony: Perfidia");
v("3byw5IecubM"); d(155);

t("Roberto Delgado and His Orchestra - Amapola");
v("VadamgpZw9Y"); d(207);

t("ROBERTO DELGADO GOODBYE MY LOVE GOODBYE");
v("6DqJTyTHoZw"); d(217);

t("(HD 720p ) Roger Williams Plays \"Autumn Leaves\"");
v("Nwr2BZQN2-U"); d(265);

t("Auld Lang Syne (with lyrics)");
v("WTCryF1J54Y"); d(155);

t("Don't Cry for me Argentina - Piano - Instrumental");
v("YAx34rSyY9g"); d(370);

t("Fausto Papetti - La Mer");
v("_sXB8wfcJBE"); d(184);

t("ERNESTO CORTAZAR- La vie en rose");
v("y2xRDf7oXPU"); d(192);

t("FRANCK POURCEL - Chitarra Romana　　ローマのギター");
v("5gHE6jx8c0g"); d(132);

t("Romeo y Julieta - Caravelli");
v("bvjyhVp_2zg"); d(355);

t("Love Story- Francis Lai, Henry Mancini wmv");
v("unJ4KJX1vtE"); d(170);

t("RICKY KING Maria Elena");
v("qCGlLrZ-K80"); d(239);

t("Ricky King - Only You");
v("2CmjzCrdxq4"); d(206);

t("RICKY KING - Verde");
v("xkdmoQ8-t5U"); d(230);

t("SWAY [Instrumental] (HD)");
v("mWFpbwE43LI"); d(203);

t("LEO ALEMAN - Something Stupid (instrumental piano)");
v("L0OAROmjiXE"); d(157);

t("Franck Pourcel -Murmullo de Amor -Instrumental Gold");
v("nahu_0sY8_k"); d(146);

t("Nicolas de Angelis -Voyage");
v("N6nQPmWuvSI"); d(183);

t("NICOLAS DE ANGELIS-ORFEO NEGRO.mpg");
v("JX8_58SZjAQ"); d(199);

t("QUIEREME MUCHO - JULIO ANGEL Y SU TRIO.wmv");
v("qRgAc3dZLkg"); d(232);

t("GUANTANAMERA, CLASICOS DE LA MUSICA INSTRUMENTAL");
v("ZcRUYDvmlhI"); d(255);

t("El Condor Pasa Roberto Delgado y su Orquesta.wmv");
v("Q2197gKWcEE"); d(182);

t("My Choice - James Last: This is My Song");
v("M6FmQd27WE0"); d(156);

t("Ronnie Aldrich - Top Of The World");
v("eOQYHf2YeVE"); d(180);

t("Werner Müller - La Cumparsita");
v("Fvbx7W1MG0A"); d(193);

t("Viva Brazil - Latin America");
v("XTe54G8JyMs"); d(206);

t("Can't Help Falling In Love (Elvis Presley) Instrumental");
v("atuBBn2jDE4"); d(248);
  
t("Stanley Black - Feelings");
v("tw-Y1Muc3OM"); d(244);

t("ROBERTO DELGADO - Mamy Blue");
v("SD9LToOze2A"); d(178);

t("Love Theme From The Godfather - Percy Faith e sua orquestra");
v("wX6T8yXUpA4"); d(207);

t("TRIO LOS PANCHOS, QUIZAS QUIZAS QUIZAS, BOLERO,ROMANTICO, INSTRUMENTAL");
v("qDm33bLsn8E"); d(199);

t("HELMUT ZACHARIAS - THE LAST WALTZ");
v("DOlGQ5u9pE8"); d(174);

t("101 Strings Orchestra - Three Coins In The Fountain");
v("mWi20zuMezo"); d(249);

t("Celebration of Spring -- Featuring Music by David Nevue (www.DavidNevue.com)");
v("t4xBPPAik5k"); d(302);

t("Klaus Wunderlich: Rumba Medley");
v("Ka3k6ZTToS4"); d(249);

t("EVENING STAR");
v("fuFnUqLwrfs"); d(219);

t("torna a surriento");
v("qQjQXFcGEFY"); d(218);

t("Franz Schubert - Serenade");
v("XDmsd_wKUek"); d(255);

t("CARAVELLI Aranjuez, Mon Amour");
v("qpA-xzh3TMo"); d(270);

t("Franck Pourcel - Tristesse");
v("ft0gmMU3kUo"); d(172);

t("Schumann - Träumerei ( Cover )");
v("bcSLzjWTbws"); d(138);

t("Franz Schubert-Ave Maria en latin.mp4");
v("O3-g0qgVjwc"); d(280);

t("101 STRINGS - Christmas");
v("ddaNPhrE954"); d(661);     

/////////////--- Bottom Border of VIDEO LIST ---///////////////

</script>
</div>
</body></html>    <!--378 lines -->

Popular posts from this blog

PHP JQUERY PROXY DEMO

Image
Proxy script (or proxy program) is a script, wich is located between the user's browser and the "target server". Here I'would like to make a simple demo for PHP-Jquery-script proxy method. So far in my blog I just use YouTube API v.3 and JavaScript-jQuery to find videos. This time I try to use PHP language and jQuery to find videos. We often hear about "Web scraping with PHP," which can be roughly considered to include 9/10 PHP and 1/10 jQuery. Now I want to do it again but with 1/10 PHP and 9/10 jQuery. This page ("php-jquery-proxy.html") is for web scraping using mainly jquery-ajax in combination with only one function from PHP language (get_file_contents function). Using it I can get video ids, video titles from the source code of youtube pages and watch those videos continuously. To use this page you don't need to have Youtube API-3 key but need to download from Internet the XAMPP package...
Read more

WEB PROGRAMMING ON IPAD. Search yt videos by keyword and load js file to play

Previously in March and April 2016 I posted OBSERVE nextPageToken IN YOUTUBE JSON DATA and SEARCH BY KEYWORD - GETTING MAXIMAL NUMBER OF ITEMS. Now those posts were old, some links were broken, They are written for PC and then youtube did not restrict video search by granting quota. Now I update it to suit the quota situation and write for programming on the ipad. <!DOCTYPE html> <html> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <meta name= "author" content= "pvhung20" > <head> <script src= "https://code.jquery.com/jquery-3.6.0.js" ></script> <style> body { font-family :Arial; font-size : 14pt ; background-color : #003333 ; margin : 0px ; padding : 0px ; margin-bottom : 50px ; color : white ; } button , input , textarea , span { font-size : 14pt ; } textarea { ...
Read more