【问题标题】: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.下载它。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-01-21
        • 1970-01-01
        • 2021-05-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多