Search and play YouTube results using API, Javascript, or PHP

Question

I want to create something where I can search a youtube video and it automatically plays all results one after the other. I've been searching the youtube api and havent found anything that relates. Anyone know of a place to get started? I know Javascript, PHP and MySQL, if someone had a script or place to start I would greatly appreciate it.

Answer 1

I've used javasript's arrays in my web for playing Youtube videos continuously. Please try it at the address below:
http://play-videos.url.ph/v3/search-play.html

tit = []; vid = [];
 portion = 50;  // portion should be <= 50
 var maxRes = portion;
 var nextPageToken;   
 var searchText = "";
 var want = 150;
 sum = 0; sumN = 0;
 
 function start(num){
        want = num;
        searchVid()
   }
          
  function searchVid(PageToken){
   var searchText= $('#searchtext1').val();
        $('#response1').html("<b>Searching for "+searchText+"</b>");
   
    $.get(
        "https://www.googleapis.com/youtube/v3/search",{
        part : 'snippet',
        q : searchText,
        maxResults : maxRes, /* 50 */
        pageToken : PageToken,
        key: 'AIz*********************************zm4'},
        /* REPLACE with your API KEY */
        function myPlan(response){
            nextPageToken=response.nextPageToken;     
            var resultCount = response.pageInfo.totalResults;        
            stList = '';
            if(want >= resultCount){ want = resultCount} 
            itemsLen = response.items.length;
            for (var i=0; i<response.items.length;i++){
                var videoID =response.items[i].id.videoId;
                if(typeof videoID != 'undefined'){
                    var titSt =response.items[i].snippet.title;
                    vid.push(videoID);
                    tit.push(titSt);
                    ss='<tr>'+
                    '<td style="width:80px;">'+
                    '<img  width="80" height="60" src="http://img.youtube.com/vi/'+ 
                    videoID +'/default.jpg">'+
                    '</td><td><b>'+ (sumN+1) +'</b>&nbsp;<a href="#" '+ 
                    'onclick="playVid('+sumN +', this); return false">'+
                    titSt +'</a></td></tr>';
                    stList += ss;
                    document.getElementById('foundText').innerHTML = 
                    '<span style="color:green"><b>'+sum+'</b></span>';
                    document.getElementById('wantSpan').innerHTML = sumN + '';
                    sum++ ; sumN++ ; 
                    if((sum == want)||(sum == resultCount)){ 
                        document.getElementById('foundText').innerHTML = 
                        '<span style="color:red"><b>'+sum+'</b></span>';
                        document.getElementById('wantSpan').innerHTML = 
                        '<span style="color:#6600FF">'+ sumN + '</span>';    
                        document.getElementById('r1').innerHTML +=  stList;
                        sum = 0;
                        want = 150; 
                        len = vid.length;
                        last = len - 1;
                      return;
                    }
                  }  /* End of if(typeof ... */
              }  /* End of for(i=... */
        document.getElementById('r1').innerHTML +=  stList;
        x = want - sum;
        if(x >= portion){
            maxRes = portion;
        }else{
            maxRes = x;
        }
        searchVid(nextPageToken);
   }); /* End of $.get( ... */
  } 
  
  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 ){
           nextVid();
        }
  }    
  
  function onPlayerStateChange(event) {
        if (event.data == 0) {
             nextVid();
             return false;
        }
  }
  
  function playVid(num){
      jj=num;
      showTit(num);
      ide = vid[num];
      player.loadVideoById(ide, "large");
      ob = document.getElementById('list1')
      ar = ob.getElementsByTagName('tr');
      for(i=0;i<ar.length;i++){
          if(ar[i].style.backgroundColor != "#EEEEEE"){
               ar[i].style.backgroundColor = "#EEEEEE" 
          }
      }
      ar[num].style.backgroundColor = '#CCFF99';
  }
  
  function nextVid(){
      len = vid.length;
          if(len > 0){
          last = len-1;
          if(jj <= last){jj=jj+1}; 
          if (jj > last){jj=0};
          playVid(jj);
      }else{
          alert('At the openning, this page has only one video.\n\n'+
          'You should search them more')
      }
  }
  
  function showTit(k){
      document.getElementById("vtitle").innerHTML = (k+1) + 
      '/'+ vid.length + ' : ' + tit[k];
  }
  
  function init(){
       document.getElementById("vtitle").innerHTML = 'Pepito (Lisa del Bo)';
  }

  function readyTerm(term){
      $("#searchtext1").val(term);
  }

body{background-color:#999999; margin:0px;padding:0px;
  font-family:Arial;font-size:10pt;}   
 
  td{border:1px solid gray;font-size:10pt;}  
  
  a{text-decoration:none;}  
  a:hover{color:green;}  
  
  input[type="button"], button{
  background-color:#DDDDDD;cursor:pointer;padding:0px;
  }  
  
  #vtitle{
  width:980px;height:25px;color:white;background-color:#1B1B1B;
  margin-top:-2px;overflow:hidden;padding-top:10px;
  }
  #header1{font-weight:bold;width:100%;height:24px;
  background-color:#006699;padding:3px;position: fixed;left: 0px;top: 0px;}
  
  #header1 td {border: none;}

<body onload="init()">
<div align="center">
<table id="header1" width=100% height="42px" style="margin-bottom:-7px;">
  <tr>
  <td width="50%" style="color:white;font-family:'Time New Roman';font-size:14pt">
        <b><i>&nbsp;SEARCH AND PLAY CONTINUOUSLY</i></b>
          </td>
  <td width="50%" align="right">
      <button type="button" onclick="player.pauseVideo();">|| Pause</button>
      <button type="button" onclick="player.playVideo();">> Play</button>
      <button type="button" onclick="nextVid();">>> Next</button>&nbsp;
  </td>
  </tr>
</table>  

<div id='player' style="margin-top:37px"></div>
<div id="vtitle"></div><br>

<div id="menu" style="background-color:#99CCFF;padding:4px;width:100%">
  <table ><tr style="font-size:10pt;">
      <td style="background-color:white" style="border:1px gray solid">
          <b>All:&nbsp;<span id="wantSpan" 
          style="font-size:12pt;font-style: italic">0</span></b>
          &nbsp;
          <b><i>Found:</i>&nbsp;
      <span id="foundText" style="font-size:12pt;font-style: italic;color:green">0
      </span>&nbsp;</td></b>
      
      <td style="border:1px gray solid;vertical-align:middle">&nbsp;
          <b><i style="color:black;font-size:10pt">Search Text:</i></b>&nbsp;<input type="text"  
          value="Folli Michelangelo" 
          id="searchtext1" size="72" style="border-style:inset">&nbsp;
          <button type="button"  onclick="start(150)">S150</button>
          <button type="button"  onclick="start(300)">S300</button>
      </td>      
  </tr></table>
</div><br>

<div id="tip" style =
"width:780px;height:15px;overflow:auto;background-color:white;text-align:left;padding:10px;line-height:160%">
      <a href="#" onclick="readyTerm('Ricky King'); return false">Ricky King</a>,&nbsp;
      <a href="#" onclick="readyTerm('Paul Mauriat'); return false">Paul Mauriat</a>,&nbsp;
      <a href="#" onclick="readyTerm('Richard Clayderman'); return false">Richard Clayderman</a>,&nbsp;
      <a href="#" onclick="readyTerm('Folli Michelangelo'); return false">Folli Michelangelo</a>
</div><br>
      
<b>SEARCH RESULTS</b>
  <br><br>
  <div id="list1" 
  style="width:800px;;height:300px;overflow:auto;background-color:white;text-align:left">
      <table id="tableA" width="100%"><tbody id="r1">
      </tbody></table>
  </div><br>

</div>   <!-- center -->

Answer 2

You're right the YouTube API is way too complicate to find the answer but here is a good Getting Started guide.

Anyway Take a look at Youtube Simple Embed.

This page allows you to try Google Data API online (without programming) to get an idea what you can do. Also here is the API documentation for YouTube search.