Load new video src on link / video click html5

Question

I have a html5 video loaded on my page which looks like this:

'

  <div class="row">

      <video controls class="vid-center" poster="<?php echo get_template_directory_uri(); ?>/img/video-bg.png" id="video-id">
        <div class="video-overlay">logo and play bitton here logo and play bitton here </div>
        <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag. </video>
  </div>
    <div class="video-cont"></div>
  </section>
    <div class="row">

        <div class="large-3 small-4 columns">
          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid1.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>

        <div class="large-3 small-4 columns">
          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid2.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>

        <div class="large-3 small-4 columns">

          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid3.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>
        <div class="large-3 hide-for-small-only columns">

          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid4.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>
      </div>

'

I am trying to create a basic gallery so when a user selects / clicks / presses one of the thumbnail images it will load a new video into the video player i.e change the video source depending on which img / div is clicked. If thumbnail clicked then load the string src into the player and autoplay.

Is this possible to do in JavaScript to change the current video src?

Any help would be greatly appreciated.

Answer 1

This demo is twofold:

1. The top half features four divs, which upon loading will dynamically have a video each.
2. The bottom half has one video and a playlist. The video element will play whatever is clicked on the playlist.

What they have in common is that they are sharing the same video and image files. Basically, this demonstration shows 2 ways to go about having multiple videos on a page.

1. The top example starts of as 4 normal divs.

   • loadPlayers() is called on pageload. It will:
     • Collect the 4 divs into a NodeList.
     • Convert the NodeList into an array.
     • Array.prototype.map.call() will also call an anonymous function that will gather each of the divs ids and the pass them into the next function...
   • struct(ID) is responsible for building the video elements.
     • The ids from loadPlayers() is now processed into strings that will define values for src for each video.
     • The video and source elements are made with createElement()
     • The attributes are added by setAttribute()
     • Finally, each video is added into it's corresponding div with appendChild().

2. The bottom example dynamically creates a playlist from an array of strings provided by the developer (this can be modified so the user can interact with creating a playlist.)

   • generateList(arr, str) requires an array of strings and an element to add playlist items into. The first argument, arr is an array, each string representing the file name of a video/image (sans extension). The second argument is a string that must be syntactically like a selector. ex:

     <div id="vid3"></div> = "#vid3" <nav></nav> = "nav" <main class="box"></main> = ".box" <input type="number"/> = "input[type='number']"

   • Although this argument can be any element, it's suggested that a ul, ol, dl, or nav are better suited to host the playlist items.

   • Using array.map() to apply the function eachItem() to each array element, it is then returned as a complete playlist; each item is an anchor with a clipped background image.

   • When each item is clicked, the eventListener will trigger the function playSelect()

PLUNKER

README.md

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Video Gallery</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      font: 400 16px/1.45 'Verdana';
    }
    
    body {
      position: relative;
      background: #111;
      color: #EEE;
    }
    
    .gallery {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      width: 100vw;
      height: 50vh;
    }
    
    #sec2 {
      justify-content: center;
    }
    
    .vid {
      width: 240px;
      flex 0 2 auto;
    }
    
    .solo {
      width: 480px;
      flex: 0 2 auto;
    }
    
    video {
      width: 100%;
      height: auto;
    }
    
    .list {
      border: 3px inset #fc3;
      margin: 0 10px;
    }
    
    .list a {
      text-decoration: none;
      cursor: pointer;
      display: block;
      width: 75px;
      height: 75px;
      background-repeat: no-repeat;
      background-size: cover;
      color: #00f;
      font-size: 1rem;
      border-bottom: 1px solid #fc0;
    }
    
    .list a:hover {
      color: #0ff;
    }
    
    @media screen and (max-width: 768px) {
      #sec1 {
        justify-content: flex-start;
      }
      #sec2 {
        justify-content: flex-end;
      }
      .vid {
        flex: 0 2 auto;
        width: 160px;
      }
      .solo {
        flex: 0 2 auto;
        width: 320px;
      }
    }
  </style>
</head>

<body>
  <section id="sec1" class="gallery">
    <div id="vid1" class="vid"></div>
    <div id="vid2" class="vid"></div>
    <div id="vid3" class="vid"></div>
    <div id="vid4" class="vid"></div>
  </section>

  <section id="sec2" class="gallery">
    <div id="vid5" class="solo">
      <video id="vid5v" poster="https://glpjt.s3.amazonaws.com/so/av/vid5.png" controls=true>
        <source src="https://glpjt.s3.amazonaws.com/so/av/vid5.mp4" type="video/mp4">
      </video>
    </div>
    <nav id="vNav5" class="list"></nav>
  </section>

  <script>
    var vNav5 = document.getElementById('vNav5');
    var playlist = ['vid1', 'vid2', 'vid3', 'vid4'];


    function loadPlayers() {
      var divs = document.querySelectorAll('.vid');
      var ids = Array.prototype.map.call(divs, function(obj) {
        var ID = obj.id;
        return vStruct(ID);
      });
    }

    function vStruct(id) {
      var vTag = document.createElement('video');
      var vSrc = document.createElement('source');

      var vDiv = document.getElementById(id);
      var vIDv = id.toString();
      vTag.id = vIDv + 'v';
      var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/';
      var vPng = vUrl + id + '.png';
      var vMp4 = vUrl + id + '.mp4';

      vTag.setAttribute('poster', vPng);
      vTag.setAttribute('controls', true);

      vSrc.setAttribute('src', vMp4);
      vSrc.setAttribute('type', 'video/mp4');

      vDiv.appendChild(vTag);
      vTag.appendChild(vSrc);

    }

    function generateList(vArr, vStr) {
      var vTgt = document.querySelector(vStr);
      var lArr = vArr.map(eachLink);
      lArr.forEach(function(obj) {
        vTgt.appendChild(obj);
      });
    }

    function eachLink(id) {
      var ID = id.toString();
      var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/';
      var vLink = document.createElement('a');
      vLink.setAttribute('href', vUrl + ID + '.mp4');
      vLink.textContent = ID;
      vLink.style.backgroundImage = "url('" + vUrl + ID + ".png')";
      return vLink;
    }

    vNav5.addEventListener('click', playSelect, false);

    function playSelect(e) {
      e.preventDefault();

      if (e.currentTarget !== e.target) {
        var choice = e.target.href;
        var parent = e.target.parentElement;
        var uncle = parent.previousElementSibling;
        var vid = uncle.querySelector('video');
        if (vid.playing) {
          vid.pause();
        }
        vid.src = "";
        vid.src = choice;
        vid.load();
        vid.play();
        e.stopPropagation();
      }
    }

    loadPlayers();

    generateList(playlist, '#vNav5');
  </script>
</body>

</html>