我如何使视频播放像youtube一样在我的网站上？html/css (阅读更多)
我有一个网站(为一个乐队)，我正在工作，这里：http://atfa.hostei.com/。
在视频页面上，它显示了一个介绍视频，然后你被重定向到他们的现场直播页面，在那里你可以观看他们的演唱会现场直播。在介绍视频下面，我有一个聊天室。在聊天室下面，我想发布他们所有的YouTube视频，更新，等等。
我一直在努力想办法通过尝试和错误来做这件事，但我迷失了方向。我想要的YouTube视频播放器，但会有其他视频缩略图，当你点击他们会改变你的网页上的视频。
但我也不想要太多的视频，所以我想做一个小的标签下面说12，3.这样你就可以在相同的页面上打开不同的视频，而不需要刷新或任何东西。
下面是我想要的视频页面上的一个例子：http://www.higatv.com/rhtv/?page_id=142
我看过消息来源但我迷路了。
回答 1
Stack Overflow用户
发布于 2012-05-29 10:58:20
我对你的建议是，让一个功能工作，然后移动到下一个。不要尝试实现你不熟悉的三种不同的东西。
一个简单的例子让你开始。
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)单击“更改视频url <param name="movie"”或只删除旧对象并创建另一个对象。
编辑：
步骤(4)的示例如下所示：http://jsfiddle.net/794Re/3/
有两种方法嵌入视频。我喜欢看上去很简单的。
编辑：
下面是一个示例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>';
}https://stackoverflow.com/questions/10804821
复制
腾讯云开发者
