All geek questions in one place

Search and play YouTube results using API, Javascript or PHP

I want to create something where I can search for videos from YouTube, and it automatically plays all the results one by one. I was looking for youtube api and havent found something regarding. Does anyone know of a place to start? I know Javascript, PHP and MySQL, if someone had a script or a place to start, I would be very grateful.

+4
source share
2 answers

You are correct that the YouTube API makes it difficult to find an answer, but here is a good Getting Started Guide .

Anyway, watch Youtube Simple Embed .

This page allows you to try the Google Data API online (without programming) to get an idea of ​​what you can do. The API documentation for YouTube Search is also provided here.

+3
source

I used javasript arrays on my network to play Youtube videos continuously. Please try at:
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 -->
0
source

Source: https://habr.com/ru/post/1403004/

More articles:


All Articles