使用API、Javascript或PHP搜索并播放YouTube结果

我想创建一个可以搜索youtube视频的东西，它会自动一个接一个地播放所有结果。我一直在搜索youtube api，但没有找到任何相关的内容。有人知道哪里可以开始吗？我知道Javascript、PHP和MySQL，如果有人有脚本或地方可以开始，我会非常感激。

你说得对，YouTube API太复杂了，找不到答案，但这里有一个很好的入门指南。

无论如何，看看Youtube简单嵌入。

此页面允许您在线尝试Google Data API（无需编程），了解您可以做什么。此外，这里还有用于YouTube搜索的API文档。

我在网络中使用了javasript的数组来连续播放Youtube视频。请在以下地址试用：
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.nn'+
          '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 -->

相关内容

最新更新

热门标签：