视频画廊Web开发

Question

我目前正在建设一个网站，并试图完成我的视频页面。我想要一个这样的布局：

​

顶部有一个大的视频占位符，下面有几个缩略图。

当你点击下面的缩略图时，我希望他们在顶部的空间中加载相关的视频。我对设计这样的东西所需的html/css很满意，但还没有足够的知识来编写php或javascript (不确定我需要什么？)。有什么方法可以做到这一点呢？我在谷歌上搜索了半个多小时，试图找到一个解决方案，但在搜索视频集时，我发现了许多我宁愿不使用的wordpress插件。

无论如何，如果有任何建议，我将不胜感激。

编辑:如果有任何不同，我将嵌入youtube视频，而不是自托管视频

Answer 1

这就是你要的

演示：http://codepen.io/techsin/full/EjrqVz/

代码地址：http://codepen.io/techsin/pen/EjrqVz

$('#vids .thumb').click(function(){
  $('#mainVid video').attr('src',$(this).data('url')).get(0).play() 
});

Video元素自带play方法，默认是原生api。因此，要运行视频，您所要做的就是在video元素上调用方法play。

在我的代码中，我有jquery选择器，我使用get获取原生元素，然后调用原生方法play。到目前为止，Jquery还没有播放视频或声音的方法。

整个工作的方式是，我基本上替换了视频元素的src url，并告诉它播放。就像我如何在不改变图像元素本身的情况下改变图像一样。这是通过更改src url实现的。

Answer 2

最简单快捷的方法是使用youtube中的youtube嵌入代码，然后交换src属性：

http://jsfiddle.net/zs90on6r/

HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/tXoyQssMwMM" frameborder="0" allowfullscreen></iframe>

<a class="another" href="https://www.youtube.com/embed/mKCRPJcOp90">Time Travel Stories</a>
<a class="another" href="https://www.youtube.com/embed/o_JZbQao6jo">Skate</a>

Javascript ( jQuery)：

$(".another").on("click", function(e) {
    e.preventDefault();
    $("iframe").eq(0).attr("src", $(this).attr("href"));
})