Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
video load test_v3
(version: 0)
Comparing performance of:
v1 vs v2 vs v3 vs v4 vs v6 vs lazyload
Created:
6 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (6)
Previous results
Fork
Test case name
Result
v1
v2
v3
v4
v6
lazyload
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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!
Related benchmarks:
Kurwa Mac
Instly: String concat
video load test_v2
abcdef 1234
Comments
Confirm delete:
Do you really want to delete benchmark?