我给你的建议是让一个功能工作,然后转到下一个。不要试图实现你不熟悉的三种不同的东西。
一个简单的例子让你开始。
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 更改视频 url<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>';
}