如何从我的网站搜索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>
但是,它会打开一个新页面。 我还尝试将"_blank"替换为 iframe 的名称,但这也没有用:
<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>
谢谢
我在以下站点上遇到了代码。 它只是我正在寻找的,它似乎应该有效,但它没有。 有人知道代码是错误的吗?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>
> 指向 jquery.min.js 的链接可能未正确连接。 它工作得很好,只需包括
脚本 src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" 在脚本标记中
在页面顶部。:)