Suave.js Preparing Echo.js

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 + "\"" + "/>" + "pizza";
       
        this.elem.parentNode.innerHTML = videoHTML + sourceVideo;

       

      }

    }

  };

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