Run results for: video load test_v3

Test name	Executions per second
v1	2421.7 Ops/sec
v2	1856.4 Ops/sec
v3	27950.5 Ops/sec
v4	1119.0 Ops/sec
v6	780.9 Ops/sec
lazyload	3604.6 Ops/sec

v1

function loadVideo() {
  let videos = document.querySelectorAll("[data-bs='video']");
  try{
    if(videos.length){
      videos.forEach(function(video){
        let dataVideo = video.dataset.info;
        if(dataVideo !== undefined){
          if (dataVideo.indexOf("youtube") != -1 || dataVideo.indexOf("youtu.be") != -1) {
            let code = dataVideo.substring(dataVideo.length, (dataVideo.length - 11));
            video.innerHTML = "<img title='youtube'  src='https://img.youtube.com/vi/" 
              + code 
              + "/maxresdefault.jpg'><i class='icon fab fa-youtube'></i>";
            if(!video.closest(".bs-product-thumbnail")){
              video.addEventListener("click", function(){
                video.innerHTML = "<iframe src='https://www.youtube.com/embed/"
                  + code 
                  + "?autoplay=1&showinfo=0&rel=0' allowfullscreen allow='autoplay'>";
              });
            }//closest bs-product-thumbnail
            //youtube ----------------------------------------------------------------
          }else if(dataVideo.indexOf("vimeo") != -1){
            var apiVimeo = new XMLHttpRequest();
            apiVimeo.responseType = 'json';
            apiVimeo.open('GET', '//vimeo.com/api/oembed.json?url=' + dataVideo, true);
            apiVimeo.onload = function () {
              if (apiVimeo.response != null) {
                video.innerHTML = "<img title='" 
                  + apiVimeo.response.title 
                  + "' " + "src='"
                  + apiVimeo.response.thumbnail_url_with_play_button.replace('295x166', '1200x676') + "'>"
                if(!video.closest(".bs-product-thumbnail")){
                  video.addEventListener("click", function(){
                    video.innerHTML = apiVimeo.response.html
                  });
                }//closest bs-product-thumbnail
              }// api response
            }//onload
            apiVimeo.send(null);    
          }//vimeo ------------------------------------------------------------------------
        }// if != undefined
      })//videos.each
    }
  }catch(ex){
    console.log(ex.message)
  }
}

(function(){
  loadVideo()
})();

v2

function loadVideo() {
  let videos = document.querySelectorAll("[data-bs='video']");
  try{
    if(videos.length){
      videos.forEach(function(video){
        let dataVideo = video.dataset.info;
        if(dataVideo !== undefined){
          if (dataVideo.indexOf("youtube") != -1 || dataVideo.indexOf("youtu.be") != -1) {
            let code = dataVideo.substring(dataVideo.length, (dataVideo.length - 11));
            video.innerHTML = `<img title='youtube' src='https://img.youtube.com/vi/${code}/maxresdefault.jpg'><i class='icon fab fa-youtube'></i>`;
            if(!video.closest(".bs-product-thumbnail")){
              video.addEventListener("click", function(){
                video.innerHTML = `<iframe src='https://www.youtube.com/embed/${code}?autoplay=1&showinfo=0&rel=0' allowfullscreen allow='autoplay'>`;
              });
            }//closest bs-product-thumbnail
            //youtube ----------------------------------------------------------------
          }else if(dataVideo.indexOf("vimeo") != -1){
            var apiVimeo = new XMLHttpRequest();
            apiVimeo.responseType = 'json';
            apiVimeo.open('GET', `//vimeo.com/api/oembed.json?url=${dataVideo}`, true);
            apiVimeo.onload = function () {
              if (apiVimeo.response != null) {
                video.innerHTML = `<img title='${apiVimeo.response.title}' src='${apiVimeo.response.thumbnail_url_with_play_button.replace('295x166', '1200x676')}'>`;
                if(!video.closest(".bs-product-thumbnail")){
                  video.addEventListener("click", function(){
                    video.innerHTML = apiVimeo.response.html
                  });
                }//closest bs-product-thumbnail
              }// api response
            }//onload
            apiVimeo.send(null);    
          }//vimeo ------------------------------------------------------------------------
        }// if != undefined
      })//videos.each
    }
  }catch(ex){
    console.log(ex.message)
  }
}

(function(){
  loadVideo()
})();

v3

function loadVideo() {
  let videos = document.querySelectorAll("[data-bs='video']");
  try{
    for(let n = 0; n < videos.length; n++){
      let video = videos[n]
      let dataVideo = video.dataset.info
      if (dataVideo.indexOf("youtube") != -1 || dataVideo.indexOf("youtu.be") != -1) {//youtube -----------------------------
        let code = dataVideo.substr(dataVideo.length-11,11);
        video.innerHTML = `<img title='youtube' src='https://img.youtube.com/vi/${code}/maxresdefault.jpg'><i class='icon fab fa-youtube'></i>`;
        if(!video.closest(".bs-product-thumbnail")){
          video.addEventListener("click", function(){
            video.innerHTML = `<iframe src='https://www.youtube.com/embed/${code}?autoplay=1&showinfo=0&rel=0' allowfullscreen allow='autoplay'>`;
          });
        }//closest bs-product-thumbnail
        //youtube -----------------------------------------------------------------------------
      }else if(dataVideo.indexOf("vimeo") != -1){ // vimeo ------------------------------------
        let apiVimeo = new XMLHttpRequest();
        apiVimeo.responseType = 'json';
        apiVimeo.open('GET', `//vimeo.com/api/oembed.json?url=${dataVideo}`, true);
        apiVimeo.onload = function () {
          if (apiVimeo.response != null) {
            video.innerHTML = `<img title='${apiVimeo.response.title}' src='${apiVimeo.response.thumbnail_url_with_play_button.replace('295x166', '1200x676')}'>`
            if(!video.closest(".bs-product-thumbnail")){
              video.addEventListener("click", function(){
                video.innerHTML = apiVimeo.response.html
              });
            }//closest bs-product-thumbnail
          }// api response
        }//onload
        apiVimeo.send(null);
        //vimeo ----------------------------------------------------------------------------  
      }else {
        console.warn("loadVideo() error: formato de video no soportado, porfavor usar sólo youtube o vimeo");
      }
    }// if != undefined
  }catch(ex){
    console.log(ex.message)
  }
}

(function(){
  loadVideo()
})();

v4

function loadVideo() {
  const videos = document.querySelectorAll("[data-bs='video']");
  let dataVideo;
  let code
  for(let n = 0; n < videos.length; n++){
    let video = videos[n]
    dataVideo = video.dataset.info || "";
    if (dataVideo.indexOf("youtube") != -1 || dataVideo.indexOf("youtu.be") != -1) {//youtube -----------------------------
      code = dataVideo.substr(dataVideo.length-11,11);
      video.innerHTML = `<img title='youtube' src='https://img.youtube.com/vi/${code}/maxresdefault.jpg'><i class='icon fab fa-youtube'></i>`;
      if(!video.closest(".bs-product-thumbnail")){
        video.addEventListener("click", function(){
          this.innerHTML = `<iframe src='https://www.youtube.com/embed/${code}?autoplay=1&showinfo=0&rel=0' allowfullscreen allow='autoplay'>`;
        },false);
      }//closest bs-product-thumbnail
      //youtube -----------------------------------------------------------------------------
    }else if(dataVideo.indexOf("vimeo") != -1){ // vimeo ------------------------------------
      let apiVideo = new XMLHttpRequest();
      apiVideo.responseType = 'json';
      apiVideo.open('GET', `//vimeo.com/api/oembed.json?url=${dataVideo}`, true);
      apiVideo.onload = function () {
        if (apiVideo.response != null) {
          video.innerHTML = `<img title='${apiVideo.response.title}' src='${apiVideo.response.thumbnail_url_with_play_button.replace('295x166', '1200x676')}'>`
          if(!video.closest(".bs-product-thumbnail")){
            video.addEventListener("click", function(){
              this.innerHTML = apiVideo.response.html
            },false);
          }//closest bs-product-thumbnail
        }// api response
      }//onload
      apiVideo.send(null);
      //vimeo ----------------------------------------------------------------------------  
    }else if(dataVideo === "") {
      console.warn(`loadVideo() error: data-info sin datos`);
    }else{
      console.warn(`loadVideo() error: formato de video "${dataVideo}" no soportado, porfavor usar sólo youtube o vimeo`);
    }
  }// if != undefined
}

(function(){
  loadVideo()
})();

v6

function loadVideo() {
  let videos = document.querySelectorAll("[data-bs='video']");
  try{
    for(let n = 0; n < videos.length; n++){
      let video = videos[n]
      let dataVideo = video.dataset.info ||"";
      if (dataVideo.indexOf("youtube") !== -1 || dataVideo.indexOf("youtu.be") !== -1) {//youtube -----------------------------
        let code = dataVideo.substr(dataVideo.length-11,11);
        video.innerHTML = `<img title='youtube' src='https://img.youtube.com/vi/${code}/maxresdefault.jpg'><i class='icon fab fa-youtube'></i>`;
        if(!video.closest(".bs-product-thumbnail")){
          video.addEventListener("click", function(){
            this.innerHTML = `<iframe src='https://www.youtube.com/embed/${code}?autoplay=1&showinfo=0&rel=0' allowfullscreen allow='autoplay'>`;
          });
        }//closest bs-product-thumbnail
        //youtube -----------------------------------------------------------------------------
      }else if(dataVideo.indexOf("vimeo") !== -1){ // vimeo ------------------------------------
        let apiVimeo = new XMLHttpRequest();
        apiVimeo.responseType = 'json';
        apiVimeo.open('GET', `//vimeo.com/api/oembed.json?url=${dataVideo}`, true);
        apiVimeo.onload = function () {
          if (apiVimeo.response != null) {
            video.innerHTML = `<img title='${apiVimeo.response.title}' src='${apiVimeo.response.thumbnail_url_with_play_button.replace('295x166', '1200x676')}'>`
            if(!video.closest(".bs-product-thumbnail")){
              video.addEventListener("click", function(){
                this.innerHTML = apiVimeo.response.html
              });
            }//closest bs-product-thumbnail
          }// api response
        }//onload
        apiVimeo.send(null);
        //vimeo ----------------------------------------------------------------------------  
      }else {
        console.warn("loadVideo() error: formato de video no soportado, porfavor usar sólo youtube o vimeo");
      }
    }// if != undefined
  }catch(ex){
    console.log(ex.message)
  }
}

(function(){
  loadVideo()
})();

lazyload

function isOutOfViewport(elem) {
  // Get element's bounding
  let bounding = elem.getBoundingClientRect();
  // Check if it's out of the viewport on each side
  let out = {};
  out.top = bounding.top < 0;
  out.left = bounding.left < 0;
  out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight);
  out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth);
  out.any = out.top || out.left || out.bottom || out.right;
  return out;
};

function loadVideo() {
  let videos = document.querySelectorAll("[data-bs='video']");
  try{
    for(let n = 0; n < videos.length; n++){
      let video = videos[n]
      let isOut = isOutOfViewport(video);
      if(!isOut.any){
        let dataVideo = video.dataset.info ||"";
        if (dataVideo.indexOf("youtube") !== -1 || dataVideo.indexOf("youtu.be") !== -1) {//youtube -----------------------------
          let code = dataVideo.substr(dataVideo.length-11,11);
          video.innerHTML = `<img title='youtube' src='https://img.youtube.com/vi/${code}/maxresdefault.jpg'><i class='icon fab fa-youtube'></i>`;
          if(!video.closest(".bs-product-thumbnail")){
            video.addEventListener("click", function(){
              this.innerHTML = `<iframe src='https://www.youtube.com/embed/${code}?autoplay=1&showinfo=0&rel=0' allowfullscreen allow='autoplay'>`;
            });
          }//closest bs-product-thumbnail
          //youtube -----------------------------------------------------------------------------
        }else if(dataVideo.indexOf("vimeo") !== -1){ // vimeo ------------------------------------
          let apiVimeo = new XMLHttpRequest();
          apiVimeo.responseType = 'json';
          apiVimeo.open('GET', `//vimeo.com/api/oembed.json?url=${dataVideo}`, true);
          apiVimeo.onload = function () {
            if (apiVimeo.response !== null) {
              video.innerHTML = `<img title='${apiVimeo.response.title}' src='${apiVimeo.response.thumbnail_url_with_play_button.replace('295x166', '1200x676')}'>`
              if(!video.closest(".bs-product-thumbnail")){
                video.addEventListener("click", function(){
                  this.innerHTML = apiVimeo.response.html
                });
              }//closest bs-product-thumbnail
            }// api response
          }//onload
          apiVimeo.send(null);
          //vimeo ----------------------------------------------------------------------------  
        }else {
          console.warn("loadVideo() error: formato de video no soportado, porfavor usar sólo youtube o vimeo");
        }
      }// if != undefined
    }

  }catch(ex){
    console.log(ex.message)
  }
}

(function(){
  loadVideo()
  window.addEventListener('scroll', loadVideo, false);
})();