html - 如何让视频在我的网站上像 youtube 一样播放？ html/css(阅读更多)

Question

我有一个正在工作的网站(用于乐队)，此处:http://atfa.hostei.com/ .

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

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

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

我所追求的示例位于此处的视频页面上:http://www.higatv.com/rhtv/?page_id=142

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

Answer 1

我对您的建议是让一个功能发挥作用，然后再转向下一个。不要尝试实现三个您不熟悉的不同事物。

---

帮助您入门的简单示例。

1) 获取用户\ channel 的所有视频，或者你可以做一个 rss feed 来检查列表并根据它解析它

或者你可以做 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>';
}