-2

基本的に 2 つのスクリプトをマージしようとしていますが、問題が発生しています。

私が欲しいのは、ユーザーが YouTube ビデオの検索を開始し、入力ボックスの下に検索候補がポップアップ表示されるようにすることです。次に、ユーザーが提案の 1 つをクリックすると、ビデオがページに投稿されます。

問題は、最初の部分を実行する 1 つのスクリプトと、2 番目の部分を実行する別のスクリプトがあることです。スクリプトをマージして 1 つにしようとしていますが、どんなに頑張ってもそれができないようです。助けてください！！

以下に 2 つのファイルを示します (順番に)。

インデックス.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

2つのファイルを組み合わせて、結果をフィドルに入れました：http: //jsfiddle.net/K6Wnu/

最適化できるものがあります（コードの多くは変更せず、パーツを配置して機能するようにしました）...正しい方向に進んだことを願っています。

最初のスクリプトのdom要素に追加する2番目のファイルのhtmlをいくつか含めました。例えば：

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

2番目のスクリプトの変数に保存するすべての情報...ajaxで返されるjsonオブジェクトを取得します。だからあなたはそれを抽出する必要があります。

これがあなたが望んでいたものであることを願っています=）

于 2013-02-28T15:32:52.390 に答える