如何在 html 中创建一个简单的视频库？答案

【问题标题】：How to create a simple video gallery in html?如何在 html 中创建一个简单的视频库？
【发布时间】：2017-08-11 23:16:13
【问题描述】：

我想在 html 中创建一个简单的 html 视频库，其中许多图像显示在表格中，当我们单击任何图像时，它就会播放相关视频。我搜索但没有找到任何东西。不可能吗？

我试过这段代码：

   <video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>

但是当我们点击该图像时如何将此视频与任何图像链接，视频播放。

【问题讨论】：

标签： jquery html css

【解决方案1】：

由于您没有提供完整的 HTML 标记，我将把图片放在前面以视频为例：

<img class="galleryImg" src="your image src here" /> 
<video width="320" height="240" controls autoplay>
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    <object data="movie.mp4" width="320" height="240">
        <embed width="320" height="240" src="movie.swf">
    </object>
</video>

那么你可以这样做：

$('img.galleryImg').each(function() {
    $(this).next().get(0).play();
});

【讨论】：

【解决方案2】：

您在 w3schools 中尝试的内容有关注 Live Preview

<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>

您可以创建一个类似http://www.w3schools.com/css/css_image_gallery.asp 的表格，然后删除这些图片，将图片嵌入到您的 youtube 视频中。这样我就会在你点击后播放视频。

然而 w3layouts 提供了您所期望的画廊模板，您可以从here.下载它。

【讨论】：