Suave.js Update

by Aaron Kahlhamer

HTML

<ul>
  <li>
      <a>
          <video muted loop autoplay data-echo="path/video1.{mp4}" width="200" height="268"></video>
      </a>
  </li>
  <li>
      <a>
          <video muted loop autoplay data-echo="path/video2.{mp4}" width="200" height="268"></video>
      </a>
  </li>
    <li>
      <a>
          <video muted loop autoplay data-echo="path/video3.{mp4}" width="200" height="268"></video>
      </a>
  </li>
    <li>
      <a>
          <video muted loop autoplay data-echo="path/video4.{mp4}" width="200" height="268"></video>
      </a>
  </li>
    <li>
      <a>
          <video muted loop autoplay data-echo="path/video5.{mp4}" width="200" height="268"></video>
      </a>
  </li>
</ul>

JavaScript

var Suave = function (elem) {
    this.elem = elem;
  };

  Suave.prototype = {

    init : function () {

      var videoHTML = this.elem.parentNode.innerHTML; // Copy all the HTML in the A tag.
      var dataAttr = this.elem.getAttribute('data-echo'); // Retrieve video path.
      var videoSource = dataAttr.match(/^([^]+)\{/)[1]; // Remove path {extension}.
      var fileExts = dataAttr.match(/\{([^]+)\}$/)[1].toString().replace(/\s/g, '').split(','); // Add official extension. Ex: .mp4
      
      for (var i = 0; i < fileExts.length; i++) {
        var extension = fileExts[i];
        var sourceSrc = videoSource + extension;
        var sourceType = 'video/' + extension;
        var sourceVideo = "<source" + " " + "src=\"" + sourceSrc + "\"" + " " + "type=\"" + sourceType + "\"" + "/>";
       
        var videoHybrid = videoHTML.replace(/></, '>' + sourceVideo + '<');
        this.elem.parentNode.innerHTML = videoHybrid;


        // alert(videoHybrid);
        // this.elem.remove(); // Remove <video> for IE8/IE9. Then it needs to be added back.
        // this.elem.appendChild(source);

       

      }

    }

  };

  [].forEach.call(document.querySelectorAll('video[data-echo]'), function (suave) {
    new Suave(suave).init(); 
  });