Benchmark: video load test_v2

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()
})();

Test name	Executions per second
v1	290.8 Ops/sec
v2	262.3 Ops/sec
v3	3734.9 Ops/sec
v4	244.8 Ops/sec
v6	244.2 Ops/sec

video load test_v2 (version: 9)

Comparing performance of: v1 vs v2 vs v3 vs v4 vs v6

Created: 4 years ago by: Registered User

Jump to the latest result

v1

v2

v3

v4

v6

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Test case name	Result
v1
v2
v3
v4
v6