搜索youtube并在我的网站上显示结果 [英] Search youtube and display results on my website
本文介绍了搜索youtube并在我的网站上显示结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何从我的网站搜索YouTube并在下面的同一页面上显示结果？我已经成功添加了一个搜索功能：
< form action =http://www.youtube .com / resultsmethod =gettarget =_ blank>
< input name =search_querytype =textmaxlength =128/>
< / select>
< input type =submitvalue =Search/>
< / form>
然而，它会打开一个新页面。我也尝试用iframe的名称替换_blank，但这也不起作用：
<< ; form action =http://www.youtube.com/resultsmethod =gettarget =iframe_a>
< input name =search_querytype =textmaxlength =128/>
< / select>
< input type =submitvalue =Search/>
< / form>
< iframe src =demo_iframe.htmname =iframe_a>< / iframe>
谢谢
在下面的网站。这正是我正在寻找的东西，它看起来应该起作用，但事实并非如此。任何人都知道代码是错误的吗？
http://codeapi.blogspot.com/search/label/Video%20Widget
< script type =text / javascriptsrc =jquery-1.6.2.min.js >< /脚本>
< script type =text / javascript>
函数SearchYouTube（查询）{
$ .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;
}，
错误：function（）{
alert（加载YouTube视频结果时出错）;
}
}）;
返回false;
}
< / script>
< input type =textid =queryinput/>
< input type =submitvalue =Search
onclick =javascript：SearchYouTube（document.getElementById（'queryInput'）。value）/>
< div id =search-results-block>< / div>
解决方案
以下是一种方法： b
<！doctype html>
< html>
< head>
< title>搜寻< / title>
< / head>
< body>
< div id =buttons>
< label> < input id =queryvalue ='cats'type =text/>< button id =search-buttononclick =keyWordsearch（）>搜索< / button>< / label>
< div id =container>
< h1>搜寻结果< / h1>
< ul id =results>< / ul>
< / div>
< script>
函数keyWordsearch（）{
gapi.client.setApiKey（'api_key_here'）;
gapi.client.load（'youtube'，'v3'，function（）{
makeRequest（）;
}）;
函数makeRequest（）{
var q = $（'＃query'）。val（）;
var request = gapi.client.youtube.search.list（{
q：q，
部分：'snippet'，
maxResults：10
}）;
request.execute（function（response）{
$（'＃results'）。empty（）
var srchItems = response.result.items; $ b $ .each（srchItems ，function（index，item）{
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg ='< pre>< img style =width：204px; height：128px>< / pre>';
$ id =thumbsrc ='+ vidThumburl +'alt =没有图片可用。 （'#results'）。append（'< pre> + vidTitle + vidThumbimg +'< / pre>'）;
}）
}）
}
< /脚本>
< 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> < /脚本>
< / body>
< / html>
How do I search youtube from my site and display the results on the same page underneath? I have managed to add a search feature with the following code:
<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>
However, it opens a new page. I have also tried to replace the "_blank" with the name of an iframe, but that didn't work either:
<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
I came across the code at the following site. It just what I'm looking for and it seems like it should work, but it doesn't. Anyone have an idea of were the code is wrong? 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>
解决方案
Here's one way:
<!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>
这篇关于搜索youtube并在我的网站上显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
