如何在 Web 应用程序中嵌入视频搜索

NikhilJohari

0/5 (0投票)

2010年8月23日

CPOL

1分钟阅读

31095

223

一篇关于如何在 Web 应用程序中嵌入视频搜索的文章。

下载源代码 - 1.04 MB

引言

谷歌发布了用于不同目的的 Ajax API，其中之一就是“视频搜索”。很多用户经常对如何获取谷歌密钥、如何在 Web 应用程序中嵌入视频搜索感到困惑。因此，我在这里解释如何在 Web 应用程序中使用视频搜索。

获取 Google 搜索 API 密钥

首先，你需要从这里获取 Google 搜索 API 密钥。

访问以上链接，填写信息，然后使用你的 Gmail 帐户获取 API 密钥。

注意： 你可以免费获得一个 Gmail 帐户。

密钥页面将如下所示

如何使用这段代码

现在复制整个 HTML 代码

这段代码包含了“Web 搜索”、视频搜索和博客搜索，但你只需要使用 “视频搜索”。为此，请参见下一步。

“视频搜索”

如果你关注 Google Code (由 Google 呈现)，你需要从那里获取视频搜索控件，它看起来像这样...

只需用这段代码替换上面的代码

google.load('search', '1');

  function OnLoad() {
  // create a search control

  var searchControl = new google.search.SearchControl();

  // So the results are expanded by default
   options = new google.search.SearcherOptions();

  options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); 

  // Create a video searcher and add it to the control 
  searchControl.addSearcher(new google.search.VideoSearch(), options);

那么整个代码将如下所示

<!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">

  <head>

   <title>My Google AJAX Search API Application</title>

    <script
    src="http://www.google.com/jsapi?
	key=ABQIAAAABE_5tJYjIxZez706qj8fKhSHXJsp5oogWH5jZodYSc2VMsh-
	GBTebFLwydk8evvTefXYLwNiLYMO_A" type="text/javascript"></script> 

<script language="Javascript" type="text/javascript">

    google.load('search', '1');

function OnLoad() {

 // create a search control
 var searchControl = new google.search.SearchControl();

 // So the results are expanded by default
 options = new google.search.SearcherOptions();

 options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

 // Create a video searcher and add it to the control
 searchControl.addSearcher(new google.search.VideoSearch(), options);

 // Draw the control onto the page 
 searchControl.draw(document.getElementById("searchcontrol"));

 // Search for a YouTube channel   
   searchControl.execute("ytchannel:NBA");
} 

google.setOnLoadCallback(OnLoad);

 </script>

</head>

<body>

   <div id="searchcontrol">Loading...</div>

 </body>

</html>

最终输出将如下所示

格式化输出

如果你想格式化输出，可以使用 style 标签。

在关闭 </script> 标签后使用这段代码。

<style type="text/css"> 
body
      {
            font-family:Arial Rounded MT Bold;
            background-color:Silver;
       }
 #searchcontrol
       {
            background-color:ActiveBorder;
            width:50%;
            margin-left:auto;
            margin-right:auto;
            text-align:left;         
  }  
 <style/>

输出将如下所示：

注意：在我的下一篇文章中，我将解释 GOOGLE 的所有搜索技术。

结论

我们学习了如何获取 Google Ajax 搜索 API 密钥以及如何在我们的 Web 应用程序中使用视频搜索。

历史

2010 年 8 月 23 日：初始发布