Question

我想在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>

但是当我们点击该图片时，如何将此视频与任何图片相关联，视频播放。

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

Answer 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视频嵌入图片。这样，一旦你点击它我就会播放视频。

然而，w3layout以简单的方式提供了您期望的图库模板，您可以从here.下载

如何在HTML中创建一个简单的视频库？

2 个答案: