diff options
Diffstat (limited to 'videosearch_n_play.html')
| -rw-r--r-- | videosearch_n_play.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/videosearch_n_play.html b/videosearch_n_play.html new file mode 100644 index 0000000..c43132f --- /dev/null +++ b/videosearch_n_play.html @@ -0,0 +1,82 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xml:lang="en" lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>Search Snippet</title> + <script src="http://www.google.com/jsapi"></script> + <script src="js/jquery-1.11.1.min.js"></script> + + <script type="text/javascript"> + + function searchClicked() + { + document.getElementById("videoResultsDiv").innerHTML = + 'Loading YouTube videos ...'; + + //create a JavaScript element that returns our JSON data. + var script = document.createElement('script'); + script.setAttribute('id', 'jsonScript'); + script.setAttribute('type', 'text/javascript'); + script.setAttribute('src', 'http://gdata.youtube.com/feeds/' + + 'videos?vq='+encodeURIComponent($('#searchValue').val())+'&max-results=8&' + + 'alt=json-in-script&callback=getAllMatchingIds&' + + 'orderby=relevance&sortorder=descending&format=5&fmt=18'); + + //attach script to current page - this will submit asynchronous + //search request, and when the results come back callback + //function showMyVideos(data) is called and the results passed to it + document.documentElement.firstChild.appendChild(script); + } + + + function newMusic(id) + { + $('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1'); + } + + function getAllMatchingIds(data) + { + var feed = data.feed; + var entries = feed.entry || []; + var results = new Array(); + + + for (var i = 0; i < entries.length; i++) + { + var id = entries[i].id.$t.substring(entries[i].id.$t.lastIndexOf("/")+1); + results.push({'id' : id, 'title' : entries[i].title.$t, 'link' : entries[i].link[0].href, 'duration' : entries[i].media$group.yt$duration.seconds}); + } + console.log(entries); + console.log(results); + var html = ['<ul>']; + + + for (var i = 0; i < results.length; i++) + { + html.push('<li>', '<img src="http://img.youtube.com/vi/', results[i].id, '/2.jpg" /><a href="#" onclick="newMusic(\'', results[i].id ,'\')">', results[i].title, '</a>(', results[i].duration, ')', '</li>'); + } + html.push('</ul>'); + document.getElementById('videoResultsDiv').innerHTML = html.join(''); + } + + </script> + + </head> + + <body id="page"> + <div> + <p> + <input type="text" name="searchValue" id="searchValue" value="eminem we made you" /> + <input name="searchButton" type="submit" value="Search" onclick="searchClicked()"/> + </p> + Results:<br/> + <div id="videoResultsDiv"></div> + <!-- ShowMyVideos() will populate this div with results--> + <iframe id="ytplayer" type="text/html" width="640" height="360" +src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&modestbranding=1" +frameborder="0" allowfullscreen> + </div> + </body> +</html>
\ No newline at end of file |