Benchmark: video load test_v3

HTML Preparation code:

<div data-bs="video"></div>
<div data-bs="video" data-info="https://www.youtube.com/watch?v=77MmbQv7ndM">
</div>
<div class="bs-product-thumbnail">
  <div data-bs="video" data-info="https://www.youtube.com/watch?v=77MmbQv7ndM">
  </div>
</div>
<div data-bs="video"></div>
<div data-bs="video" data-info="https://vimeo.com/272976101">
  </div>
<div class="bs-product-thumbnail">
  <div data-bs="video" data-info="https://vimeo.com/272976101">
  </div>
</div>
<div data-bs="video"></div>

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
v1
v2
v3
v4
v6
lazyload

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

It looks like you're analyzing some benchmarking results for a JavaScript library, likely related to lazy loading of images.

Based on the provided data, here are my observations:

1. **Browser**: The tests were run on Google Chrome 95 on Windows 10.
2. **Device Platform**: All tests were executed on a desktop device.
3. **Operating System**: The same Windows 10 operating system was used for all tests.
4. **Test Names**: There are six test names:
	* `v1`
	* `v2`
	* `v3`
	* `lazyload` (which is likely related to lazy loading)
	* `v4`
	* `v6`
5. **Executions per Second**: The benchmark results show varying executions per second, with the highest value being 3604.6474609375 for the `lazyload` test.
6. **Raw UA String**: All tests share the same User Agent (UA) string, indicating that they were run with the same browser and device information.

To make a more informed answer, I would need to know what specific aspects of these benchmarking results you'd like me to analyze or predict. Are you looking for:

* The average execution time per test?
* The best-performing browser or device platform?
* A prediction of how the library will perform in other browsers or on different devices?

Please let me know, and I'll do my best to provide a helpful analysis!

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36

Browser/OS: Chrome 95 on Windows

View result in a separate tab

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

Related benchmarks:

video load test_v3 (version: 0)

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

Created: 4 years ago by: Registered User

Jump to the latest result

v1

v2

v3

v4

v6

lazyload

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):