|
|
<!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="app/lib/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);
}
var songFinished;
function newMusic(id, duration)
{
$('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1');
songFinished = setTimer(nextSong, duration * 1000);
console.log("Setting timer for "+duration+" seconds");
}
function nextSong()
{
clearTimer(songFinished);
console.log("Bingo !");
}
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>
|
