如何从我的网站搜索 YouTube 并将结果显示在同一页面下方？我已经设法使用以下代码添加搜索功能：
<form action="http://www.youtube.com/results" method="get" target="_blank">
<input name="search_query" type="text" maxlength="128" />
</select>
<input type="submit" value="Search" />
</form>
然而，它打开了新的一页。我还尝试用 iframe 的名称替换“_blank”，但这也不起作用：
<form action="http://www.youtube.com/results" method="get" target="iframe_a">
<input name="search_query" type="text" maxlength="128" />
</select>
<input type="submit" value="Search" />
</form>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
Thanks
我在以下站点发现了代码。这正是我正在寻找的，看起来应该有效，但事实并非如此。有人知道代码是否错误吗？http://codeapi.blogspot.com/search/label/Video%20Widget http://codeapi.blogspot.com/search/label/Video%20Widget
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function SearchYouTube(query) {
$.ajax({
url: 'http://gdata.youtube.com/feeds/mobile/videos?alt=json-in-script&q=' + query,
dataType: 'jsonp',
success: function (data) {
var row = "";
for (i = 0; i < data.feed.entry.length; i++) {
row += "<div class='search_item'>";
row += "<table width='100%'>";
row += "<tr>";
row += "<td vAlign='top' align='left'>";
row += "<a href='#' ><img width='120px' height='80px' src=" + data.feed.entry[i].media$group.media$thumbnail[0].url + " /></a>";
row += "</td>";
row += "<td vAlign='top' width='100%' align='left'>";
row += "<a href='#' ><b>" + data.feed.entry[i].media$group.media$title.$t + "</b></a><br/>";
row += "<span style='font-size:12px; color:#555555'>by " + data.feed.entry[i].author[0].name.$t + "</span><br/>";
row += "<span style='font-size:12px' color:#666666>" + data.feed.entry[i].yt$statistics.viewCount + " views" + "<span><br/>";
row += "</td>";
row += "</tr>";
row += "</table>";
row += "</div>";
}
document.getElementById("search-results-block").innerHTML = row;
},
error: function () {
alert("Error loading youtube video results");
}
});
return false;
}
</script>
<input type="text" id="queryinput" />
<input type="submit" value="Search"
onclick="javascript:SearchYouTube(document.getElementById('queryinput').value)" />
<div id="search-results-block"></div>
这是一种方法：
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="buttons">
<label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="keyWordsearch()">Search</button></label>
<div id="container">
<h1>Search Results</h1>
<ul id="results"></ul>
</div>
<script>
function keyWordsearch(){
gapi.client.setApiKey('api_key_here');
gapi.client.load('youtube', 'v3', function(){
makeRequest();
});
}
function makeRequest(){
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
$.each(srchItems, function(index, item){
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
})
})
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
