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() 
});

视频元素默认带有播放方法，它是原生的api。因此，要运行视频，您只需在视频元素上调用方法播放。

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

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

Answer 2

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

http://jsfiddle.net/zs90on6r/

HTML

Experience

Javascript（女巫jQuery）：

<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>

视频库Web开发

2 个答案: