3

我已经查看并尝试了一堆不同的代码，但无法弄清楚。

我想做的是在我的页面上添加一个搜索框，根据搜索查询加载 YouTube 播放列表并在嵌入式播放器上播放。

我的代码：

<html>
<head>
<title>Untitled Document</title>
</head>

<body>

<script type="text/javascript">

function go_get(){
 var base_url = 'http://www.youtube.com/embed?listType=search&list=' ;
 var search_field = document.getElementById('yourtextfield').text ;
 var target_url = base_url + search_field ;
 var ifr = document.getElementById('youriframe') ;
 ifr.src = target_url ;
 return false ;
}

</script> 

<form onsubmit="go_get(); return false;" >
 <input type="text"  id="yourtextfield"/>
 <input type="submit" value="Search Playlists" />
</form>

<iframe id="youriframe" width="640" height="360" ></iframe>

</body>
</html>

结果

搜索框和播放器加载。但是，无论您搜索什么，都会加载相同的播放列表。

如果我右键单击视频并查看嵌入的 HTML，结果如下：

<iframe width="640" height="360" src="http://www.youtube.com/embed/6DYngiqZim0?
feature=player_embedded" frameborder="0" allowfullscreen></iframe>

如您所见， src 已更改。YouTube 可能会阻止这种行为吗？也许我的网址是错误的？

请帮忙！

4

2 回答 2

3

只需在第 12 行将“文本”选项更改为“值”即可

<html> 
<head>
<title>Youtube playlist search</title>
</head>

<body>

<script type="text/javascript">

function go_get(){
 var base_url = 'http://www.youtube.com/embed?listType=search&list=';
 var search_field = document.getElementById('yourtextfield').value;
 var target_url = base_url + search_field;
 var ifr = document.getElementById('youriframe');
 ifr.src = target_url;
 return false;
}

</script> 

<form onsubmit="go_get(); return false;" >
 <input type="text"  id="yourtextfield"/>
 <input type="submit" value="Search Playlists" />
</form>

<iframe id="youriframe" width="640" height="360" ></iframe>

</body>
</html>
于 2013-05-02T10:29:21.267 回答
-1

改变：

var search_field = document.getElementById('yourtextfield').text ;

至：

var search_field = document.getElementById('yourtextfield').value ;
于 2017-06-03T06:10:30.830 回答