我有一个我正在处理的网站（对于一个乐队），在这里：http://atfa.hostei.com/。
在视频页面上，它会显示一个介绍视频，然后您将被重定向到他们的直播页面，您可以在其中观看他们的音乐会。在介绍视频下方，我有一个聊天室。在聊天室下面我想发布他们所有的YouTube视频，更新等。
我一直试图弄清楚如何通过反复试验来做到这一点，但我迷失了。我想拥有YouTube视频播放器，但是当您点击它们时会有其他视频缩略图，它会改变您网页上的视频。
但我也不想要太多的视频，所以我想在说明1 2 3 ... 8下方制作一个小标签，这样你就可以在同一页面上打开不同的视频，而无需刷新或任何东西。
我所关注的一个例子是在VIDEOS页面上：http://www.higatv.com/rhtv/?page_id=142
我看过这个来源，但我迷路了。
答案 0 :(得分：2)
我给你的建议是让一个功能正常工作然后转到下一个功能。不要试图实现你不熟悉的三种不同的东西。
一个让你入门的简单例子。
1）获取用户\频道的所有视频，或者您可以使用RSS订阅源检查列表并根据该列表进行解析
或者您可以执行http://gdata.youtube.com/feeds/api/videos?author=然后解析信息
或者您可以手动放置它们。
2）使用分页将它们分隔在不同的页面中。像http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/
这样的东西3）视频的占位符
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/2pROe-xq2vo?rel=1&autoplay=0&loop=0&egm=0&border=0&fs=1&showinfo=0" style="width: 425px; height: 350px">
<param name="wmode" value="transparent">
<param name="movie" value="http://www.youtube.com/v/2pROe-xq2vo?rel=1&autoplay=0&loop=0&egm=0&border=0&fs=1&showinfo=0">
<param name="allowfullscreen" value="true">
</object>
4）onclick更改视频网址<param name="movie"或只删除旧对象并创建另一个。
修改
步骤（4）的示例在这里http://jsfiddle.net/794Re/3/
嵌入视频的方法有两种。我喜欢iframe，看起来很简单。
修改
以下是http://jsfiddle.net/zK4Z8/1/
的示例获取缩略图的技巧是将视频ID <img src="http://i.ytimg.com/vi/VideoIdGoesHere/default.jpg" width="120" height="90" />
然后加载视频你基本上改变了电影参数和数据属性，如函数loadVideoById(videoId)
<a id="img1" onclick="load(this);" rel="2yoKjhxXVN8" style="margin-left: 41px; ">
<img src="http://i.ytimg.com/vi/2yoKjhxXVN8/default.jpg" width="120" height="90" />
</a>
function load(element) {
var videoId = $("#" + element.id).attr("rel");
$('#movieObj').remove();
$(loadVideoById(videoId)).prependTo('#vholder');
}
function loadVideoById(videoId) {
return '<object id="movieObj" type="application/x-shockwave-flash" data="http://www.youtube.com/v/' + videoId + '?rel=1&autoplay=0&loop=0&egm=0&border=0&fs=1&showinfo=0" style="width: 425px; height: 350px"><param name="wmode" value="transparent"><param name="movie" value="http://www.youtube.com/v/' + videoId + '?rel=1&autoplay=0&loop=0&egm=0&border=0&fs=1&showinfo=0"><param name="allowfullscreen" value="true"></object>';
}