• Seo Expert
  • Khaali Paper

HTML5 Video Gallery

Html5 video gallery supports all types of video formats. Such as MP4, WebM, Ogg, etc. Create responsive video gallery using HTML5 and JavaScript.




Video Title...

Video Paragraph...

To Create Html5 video gallery it takes following steps:-

  1. Use HTML5 video tag and provide video path in source src.
  2. Design poster image and thumbnail.
  3. Set the different video path in <a href="#"></a> tag.
  • Html
  • JavaScript
  • Example
<video id="video" controls preload width="100%" poster="video/poster-img.jpg" onclick="this.play();">
    <source src="video/save-water.mp4" type="video/mp4" id="video_source">
</video>

<ul id="playlist" class="videosList">
    <li>
        <a href="video/save-water.mp4" poster="video/thumb.png">
            <div class="thumbIcon"><i class="fas fa-video" aria-hidden="true"></i></div>
        </a>
    </li>
    <li>
        <a href="video/save-water.mp4" poster="video/thumb.png">
            <div class="thumbIcon"><i class="fas fa-video" aria-hidden="true"></i></div>
        </a>
    </li>
</ul>
<script type="text/javascript">
    $(document).ready(function(){
        $("#playlist a").click(function(){
            // alert('Now this video is going to play');
           var video_source_link=$(this).attr("href");
           document.getElementById("video_source").setAttribute("src",video_source_link);

           var video_poster=$(this).attr("poster");
           document.getElementById("video").setAttribute("poster",video_poster);

           document.getElementById("video").load();
           document.getElementById("video").play();
           return false;
        });
    });
</script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>

    <video id="video" controls preload width="100%" poster="video/poster-img.jpg" onclick="this.play();">
      <source src="video/save-water.mp4" type="video/mp4" id="video_source">
    </video>

    <ul id="playlist" class="videosList">
        <li>
            <a href="video/save-water.mp4" poster="video/thumb.png">
                <div class="thumbIcon"><i class="fa fa-video-camera" aria-hidden="true"></i></div>
            </a>
        </li>
        <li>
            <a href="video/save-water.mp4" poster="video/thumb.png">
                <div class="thumbIcon"><i class="fa fa-video-camera" aria-hidden="true"></i></div>
            </a>
        </li>
    </ul>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="http://khaalipaper.com/js/jquery-3.2.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("#playlist a").click(function(){
             // alert('Now this video is going to play');
             var video_source_link=$(this).attr("href");
             document.getElementById("video_source").setAttribute("src",video_source_link);

             var video_poster=$(this).attr("poster");
             document.getElementById("video").setAttribute("poster",video_poster);

             document.getElementById("video").load();
             document.getElementById("video").play();
             return false;
          });
        });
    </script>
  </body>
</html>

In this tutorial we learn that how to html gallery

jQuery Image and Video Gallery Plugin