-2

我试图基本上将我的两个脚本合并在一起，但我遇到了麻烦。

我想要的是用户开始搜索 youtube 视频，并在输入框下弹出搜索建议。然后用户点击其中一个建议，视频就会发布到页面上。

问题是我有一个脚本执行第一部分，另一个脚本执行第二部分。我正在尝试将脚本合并为一个，无论我多么努力，我似乎​​都无法做到。请帮忙！！

这是两个文件（按顺序）：

索引.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Youtube Instant Search Jquery Plugin - by Karthikeyan K</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">


$(document).ready(function() {
$("#y_search").keyup(function() {
var s_text = $.trim($("#y_search").val());
$('#video_loader').YoutubeVideo({
feedurl:'http://gdata.youtube.com/feeds/api/videos?q='+s_text+'&v=2&format=5&alt=jsonc', // your rss feed url here...
count:'5', // total no of videos
height:'0', //video height
width:'0', //video width
loadingtext:'fetching videos from youtube' //loading text...
});
});
});

(function( $ ) {
$.fn.YoutubeVideo = function (pars) {
  var feeddiv = $(this);
  var pubdt;
$(this).html("<center>"+pars.loadingtext+"</center>");
  $.ajax({type:"GET",url:pars.feedurl+"&max-results="+pars.count,dataType:"jsonp",success:function(yt_data){  

  feeddiv.html('');
  $.each(yt_data.data.items,function(i,entry){ 
  var video_id=entry.id;
  var video_frame="<iframe width='"+pars.width+"' height='"+pars.height+"' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
  pubdt=new Date(entry.updated);
  feeddiv.append('<div class="frame">');
  feeddiv.append('<div class="ItemTitle">'+entry.title+' - <span class="ItemDate">'+pubdt.toLocaleDateString()+'</span></div>');
  feeddiv.append('<div class="video">'+video_frame+'</div>');
  feeddiv.append('</div>');
  }) }
});
}})( jQuery );// JavaScript Document



function watermark(inputId,text){
var inputBox = document.getElementById(inputId);
if (inputBox.value.length > 0){
  if (inputBox.value == text)
    inputBox.value = '';
}
else
  inputBox.value = text;
}


</script>
<style>
body { background:#336699; height:800px; }
div.frame { margin-bottom:20px; padding-bottom:10px; }
.video { padding:2px; text-align:center;}
span.ItemDate { font-size:11px; color:#ccc; }
.ItemTitle { font-size:18px; font-weight:bold; margin-bottom:4px; border-bottom:1px solid    #ccc; }
#y_search { width:98%; height:40px; padding:1px; font-size:18px; }
</style>

</head>
<body>
<div style="margin:0 auto; width:700px; background:#fafafa; min-height:500px; padding:10px; border:2px solid #f1f1f1;">
<h3>Youtube Search</h3>
<center><input type="text" id="y_search" value="type here" onfocus="watermark('y_search','type here');" onblur="watermark('y_search','type here');"  />
</center>
<div id="video_loader"> </div>

</div>


</body>
</html>

布局.html：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Demo by BinaryMuse</title>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>


<style type='text/css'>
body {
padding: 10px;
font-family: Arial, sans-serif;
font-size: 10pt;
}

.container {
background-color: #F7F7F7;
border: 1px solid rgba(0, 0, 0, .05);
padding: 3px;
}

.preview {
position: relative;
cursor: pointer;
float: left;
padding-right: 5px;
}

.play {
position: absolute;
left: 10px;
bottom: 10px;
}

.info-small {
text-size: 8pt;
color: gray;
}

a {
color: #3B5998;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

</style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var youtube_video_id = "Cgovv8jWETM";
var video_url = "http://youtube.com/watch?v=" + youtube_video_id;
var thumbnail_url = "http://img.youtube.com/vi/" + youtube_video_id + "/1.jpg";
var iframe_url = "http://www.youtube.com/embed/" + youtube_video_id + "?autoplay=1";
var api_url = "https://gdata.youtube.com/feeds/api/videos/" + youtube_video_id + "?v=2&alt=json-in-script&callback=?";

$(function() {
// Get video information and set the title.
$.getJSON(api_url, function(data) {
$(".info").html("<b><a href='" + video_url + "' target='_blank'>" + data.entry.title.$t +  "</a></b>");
});

// Set the thumbnail image for the video.
$(".preview img.thumb").attr("src", thumbnail_url);

// Switch to the iframe when the image is clicked.
$(".preview").click(function() {
$(this).html("<iframe width='400' height='250' src='" + iframe_url + "' frameborder='0'  allowfullscreen></iframe>");
$(this).css("float", "none");
});
});

});//]]>  

</script>


</head>
<body>
<div class="container">
<div class="preview">
<img class="thumb">
<img class="play" src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png">
</div>
<div class="info">

</div>
<div class="info-small">
www.youtube.com
</div>
<div style="clear: both;"></div>
</div>

</body>


</html>

再次感谢！！

4

1 回答 1

3

我为您合并了这两个文件并将结果放在小提琴上：http: //jsfiddle.net/K6Wnu/

有一些可以优化的东西（我没有改变你的大部分代码，只是将部分放在一些地方以便它们工作）......我希望我把你推向了正确的方向。

我从您的第二个文件中包含了一些 html，以添加到您的第一个脚本中的 dom 元素中。例如：

feeddiv.append('<div class="preview" id="'+video_id+'"></div>');

在第二个脚本中保存到变量中的所有信息......您将获得使用 ajax 返回的 json 对象。所以你只需要提取它。

我希望这是你想要的 =)

于 2013-02-28T15:32:52.390 回答