0

我有一个正在开发的网站（用于乐队），在这里：http ://atfa.hostei.com/ 。

在视频页面上，它会显示一个介绍视频，然后您将被重定向到他们的直播页面，您可以在其中观看他们的音乐会直播。在介绍视频下方，我有一个聊天室。在聊天室下方是我想发布他们所有的 YouTube 视频、更新等的地方。

我一直试图通过反复试验弄清楚如何做到这一点，但我迷路了。我想要 YouTube 视频播放器，但是会有其他视频缩略图，当您单击它们时，它会更改您页面上的视频。

但我也不想要太多的视频，所以我想在 1 2 3... 8 下方制作一个小标签，这样您就可以在保持在同一页面上的同时打开不同的视频，而无需刷新或任何其他操作。

我所追求的一个例子是在这里的视频页面：http ://www.higatv.com/rhtv/?page_id=142

我已经查看了源代码，但我迷路了。

4

1 回答 1

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&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;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&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;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&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;showinfo=0" style="width: 425px; height: 350px"><param name="wmode" value="transparent"><param name="movie" value="http://www.youtube.com/v/' + videoId + '?rel=1&amp;autoplay=0&amp;loop=0&amp;egm=0&amp;border=0&amp;fs=1&amp;showinfo=0"><param name="allowfullscreen" value="true"></object>';
}
于 2012-05-29T18:58:20.990 回答