Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test benchmark fek
(version: 0)
Comparing performance of:
New vs Define
Created:
8 years ago
by:
Guest
Jump to the latest result
Tests:
New
(function() { 'use strict'; window.DS = {}; window.DS.base = function(){ var _self = this; _self.id = id; _self.cl = cl; _self.childWithClass = childWithClass; _self.closestParent = getClosestParent; _self.tag = tag; _self.eAddAll = eAddAll; _self.eRmAll = eRmAll; _self.addClass = addClass; _self.removeClass = removeClass; _self.toggleClass = toggleClass; _self.query = query; _self.getElementIndex = getElementIndex; _self.getURLQueryVariables = getURLQueryVariables; _self.validateEmail = validateEmail; _self.ajax = ajax; function query(selector, context) { context = context || document; if (/^(#?[\w-]+|\.[\w-.]+)$/.test(selector)) { switch (selector.charAt(0)) { case '#': return [context.getElementById(selector.substr(1))]; case '.': var classes = selector.substr(1).replace(/\./g, ' '); return [].slice.call(context.getElementsByClassName(classes)); default: return [].slice.call(context.getElementsByTagName(selector)); } } return [].slice.call(context.querySelectorAll(selector)); }; function getElementIndex(node) { var index = 0; while ( (node = node.previousElementSibling) ) { index++; } return index; }; function id (id) { return document.getElementById(id); }; function cl(classname, parent) { if(parent){ return parent.querySelectorAll('.' + classname); } else { return document.getElementsByClassName(classname); } }; function tag(tag, parent) { if(parent) { return parent.querySelectorAll(tag); } else { return document.getElementsByTagName(tag); } }; function childWithClass(element, classname) { var ar = []; for (var i = 0; i < element.childNodes.length; i++) { if (doc.childNodes[i].className == classname) { ar.push(doc.childNodes[i]); } } }; function eAddAll(object, type, listenFunction) { for(var i=0;i<object.length;i++) { object[i].addEventListener(type, listenFunction); } }; function eRmAll(object, type, listenFunction) { for(var i=0;i<object.length;i++) { object[i].addEventListener(type, listenFunction); } }; function addClass(element, classname) { if(element.length) { for(var i=0;i<element.length;i++) { element[i].classList.add(classname); } } else { element.classList.add(classname); } }; function removeClass(element, classname) { if(element.length) { for(var i=0;i<element.length;i++) { element[i].classList.remove(classname); } } else { element.classList.remove(classname); } }; function toggleClass(element, classname) { if(element.length) { for(var i=0;i<element.length;i++) { if(element[i].classList.contains(classname)) { element[i].classList.remove(classname); } else { element[i].classList.add(classname); } } } else { if(element.classList.contains(classname)) { element.classList.remove(classname); } else { element.classList.add(classname); } } }; function getClosestParent ( elem, selector ) { // Element.matches() polyfill if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function(s) { var matches = (this.document || this.ownerDocument).querySelectorAll(s), i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } // Get closest match for ( ; elem && elem !== document; elem = elem.parentNode ) { if ( elem.matches( selector ) ) return elem; } return null; }; function getURLQueryVariables(qstr) { qstr = qstr.split('?'); qstr = qstr[1]; var query = {}; var a = (qstr[0] === '?' ? qstr.substr(1) : qstr).split('&'); for (var i = 0; i < a.length; i++) { var b = a[i].split('='); query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || ''); } return query; }; function validateEmail(email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } function ajax(type, endpoint, data, callback) { var xhr = new XMLHttpRequest(); var url = endpoint + "?data=" + encodeURIComponent(JSON.stringify(data/*{"form_key": "form_keyValue", "password": "101010"}*/)); xhr.open(type, url, true); xhr.setRequestHeader("Content-type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json); return callback(json); } }; xhr.send(); }; }; // document.addEventListener("DOMContentLoaded", function(event) { // console.log("base.js - DOM loaded and parsed"); // }); })(); var onYouTubeIframeAPIReady; (function() { 'use strict'; //Required base functions var base = new DS.base, query = base.query, id = base.id, cl = base.cl, tag = base.tag, eAddAll = base.eAddAll, eRmAll = base.eRmAll, addClass = base.addClass, removeClass = base.removeClass, toggleClass = base.toggleClass, getURLQueryVariables = base.getURLQueryVariables; window.DS.video = function() { var self = this, videoBtns = cl('cta-video'); var videoModalHTML; videoModalHTML +='<div id="video-modal">'; videoModalHTML +=' <div class="bk"></div>'; videoModalHTML +=' <div class="player" id="plaer">'; videoModalHTML +=' <a href="" title="close" class="close">Close</a>' videoModalHTML +=' <div id="video-container">'; videoModalHTML +=' </div>'; videoModalHTML +=''; videoModalHTML +=' <div class="controls">'; videoModalHTML +=' <div class="playpause" title="Play/Pause">'; videoModalHTML +=' <span class="play"></span>'; videoModalHTML +=' <span class="pause"></span>'; videoModalHTML +=' </div>'; videoModalHTML +=' <div class="progress" title="Video Progress">'; videoModalHTML +=' <span class="progress-time"><span class="progress-time-value">0:00</span></span>'; videoModalHTML +=' <div class="progress-bar-wrapper">'; videoModalHTML +=' <progress class="progress-bar" value="0" max="100"></progress>'; videoModalHTML +=' </div>'; videoModalHTML +=' <span class="total-time"><span class="progress-total-value">0:00</span></span>'; videoModalHTML +=' </div>'; videoModalHTML +=' <div class="volume">'; videoModalHTML +=' <div class="on-off-region" title="Volume on/off"></div>'; videoModalHTML +=' <div class="level-region" data-vol="100">'; videoModalHTML +=' <div class="bar-1 volume-bar" title="Volume 33%"></div>'; videoModalHTML +=' <div class="bar-2 volume-bar" title="Volume 66%"></div>'; videoModalHTML +=' <div class="bar-3 volume-bar" title="Volume 100%"></div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' <div class="fullscreen" title="View fullscreen">'; videoModalHTML +=''; videoModalHTML +=' <div class="region-container">'; videoModalHTML +=' <div class="region-tl"></div>'; videoModalHTML +=' <div class="region-tr"></div>'; videoModalHTML +=' <div class="region-bl"></div>'; videoModalHTML +=' <div class="region-br"></div>'; videoModalHTML +=''; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; //console.log(videoModalHTML); init(); function init() { _checkforVideos(); } function _checkforVideos() { var ctas = query('.cta-video'); if(ctas.length) { _initializeAPI(); _listen(); } }; function _listen() { eAddAll(videoBtns, 'click', _buildVideoPlayer) } function _initializeAPI() { var tag = document.createElement('script'), firstScriptTag = document.getElementsByTagName('script')[0]; tag.setAttribute('id', 'youtube-scripts'); tag.src = "https://www.youtube.com/iframe_api"; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); }; function _buildVideoPlayer(e) { e.preventDefault(); var _this = this, videoURL = _this.getAttribute('data-video'), queryObject = getURLQueryVariables(videoURL), videoID = queryObject.v, player, videoProgressInterval, videoDuration, videoLength, curPercentage = 0; document.getElementById('vp-wrap').insertAdjacentHTML( 'beforeend', videoModalHTML ); afterModalAppended(); function afterModalAppended() { var videoModal = id('video-modal'), closeBTN = query('.close', videoModal), playpauseBTN = query('.playpause', videoModal), curDurationHTML = query('.progress-time-value', videoModal), totalDurationHTML = query('.progress-total-value', videoModal), progressBarWrapper = query('.progress-bar-wrapper', videoModal), progressBar = query('.progress-bar', videoModal), soundOnOff = query('.on-off-region', videoModal), levelRegion = query('.level-region', videoModal), levelBars = query('.volume-bar', videoModal), videoPlayer = id('plaer'), iframeButton = query('.fullscreen'); _createPlayer(); function secToMinute(s){return(s-(s%=60))/60+(9<s?':':':0')+s} function videoPlayerListeners() { closeBTN[0].addEventListener('click', _closeVideoModal); playpauseBTN[0].addEventListener('click', _playPauseVideo); progressBarWrapper[0].addEventListener('click', _updateProgress); soundOnOff[0].addEventListener('click', _toggleSound); eAddAll(levelBars, 'click', _updateLevelByBar); iframeButton[0].addEventListener('click', _triggerFullscreen); }; function _closeVideoModal(e) { e.preventDefault(); closeBTN[0].removeEventListener('click', _closeVideoModal); playpauseBTN[0].removeEventListener('click', _playPauseVideo); progressBarWrapper[0].removeEventListener('click', _updateProgress); soundOnOff[0].removeEventListener('click', _toggleSound); eRmAll(levelBars, 'click', _updateLevelByBar); iframeButton[0].removeEventListener('click', _triggerFullscreen); clearInterval(videoProgressInterval); videoProgressInterval = null; player.destroy(); id('vp-wrap').removeChild(videoModal); return false; }; function _playPauseVideo(e) { e.preventDefault(); var playerState = player.getPlayerState(); switch(playerState) { case 1: player.pauseVideo(); break; case 2: player.playVideo(); break; } return false; }; function _updateProgress(e) { var _this = this, percentage = e.offsetX/_this.offsetWidth; player.seekTo(player.getDuration() * percentage); }; function _toggleSound(e) { var _this = this, curVol = player.getVolume(); if(curVol>0) { player.setVolume(0); levelRegion[0].setAttribute('data-vol', 0); } else { levelRegion[0].setAttribute('data-vol', 100); player.setVolume(100); } }; function _updateLevelByBar(e) { var _this = this; if(_this.classList.contains('bar-1')) { player.setVolume(33); levelRegion[0].setAttribute('data-vol', 33); } else if(_this.classList.contains('bar-2')) { player.setVolume(66); levelRegion[0].setAttribute('data-vol', 66); } else if(_this.classList.contains('bar-3')) { player.setVolume(100); levelRegion[0].setAttribute('data-vol', 100); } }; function _triggerFullscreen(e) { var iframe = videoPlayer; var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen || iframe.msRequestFullscreen; var exitFullScreen = iframe.exitFullscreen || iframe.webkitExitFullscreen || iframe.mozCancelFullScreen || iframe.msExitFullscreen; var fullscreenEnabled = iframe.fullscreenEnabled || iframe.webkitFullscreenEnabled || iframe.mozFullScreenEnabled || iframe.msFullscreenEnabled; var docFS = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; //iframe.classList.contains('fullscreen') ? isFS = true : isFS = false; iframe.addEventListener("fullscreenchange", fullScreenOnEsc); iframe.addEventListener("webkitfullscreenchange", fullScreenOnEsc); iframe.addEventListener("mozfullscreenchange", fullScreenOnEsc); iframe.addEventListener("MSFullscreenChange", fullScreenOnEsc); if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (requestFullScreen) { requestFullScreen.bind(iframe)(); //console.log('enter click'); } } function fullScreenOnEsc() { if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { addClass(iframe, 'fullscreen'); } else { removeClass(iframe, 'fullscreen'); } }; }; function _createPlayer() { player = new YT.Player('video-container', { height: '100%', width: '100%', videoId: videoID, playerVars: { controls:0, enablejsapi:1, modestbranding:1, showinfo:0, rel: 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { videoPlayerListeners(); videoLength = secToMinute(player.getDuration()); totalDurationHTML[0].innerHTML = videoLength; event.target.playVideo(); } function onPlayerStateChange(event) { switch(event.data) { case 0: //ENDED removeClass(playpauseBTN, 'playing'); clearInterval(videoProgressInterval); videoProgressInterval = null; break; case 1: //PLAYING addClass(playpauseBTN, 'playing'); videoProgressInterval = setInterval(_checkVideoProgress, 500); break; case 2: //PAUSED removeClass(playpauseBTN, 'playing'); clearInterval(videoProgressInterval); videoProgressInterval = null; break; case 3: //BUFFERING break; case -1: //UNSTARTED break; case 5: //CUED break; } } function _checkVideoProgress() { var curTime = secToMinute(Math.floor(player.getCurrentTime())), totalPercentage = Math.ceil((player.getCurrentTime()/player.getDuration())*100); curDurationHTML[0].innerHTML = curTime; if(curPercentage!==totalPercentage) { curPercentage = totalPercentage; progressBar[0].setAttribute('value', curPercentage); } } }; return false; } }; //$ using jQuery, pass jQuery to function above - (function($) { - below - })(jQuery); //$(document).ready(function() { document.addEventListener("DOMContentLoaded", function(event) { console.log("video.js - DOM loaded and parsed"); var dsObject = new window.DS.video(); }); //}); })();
Define
(function() { 'use strict'; window.DS = {}; define(getPropValue, 'base'); define(id, 'id'); define(cl, 'cl'); define(childWithClass, 'childWithClass'); define(getClosestParent, 'closestParent'); define(tag, 'tag'); define(eAddAll, 'eAddAll'); define(eRmAll, 'eRmAll'); define(addClass, 'addClass'); define(removeClass, 'removeClass'); define(toggleClass, 'toggleClass'); define(query, 'query'); define(getElementIndex, 'getElementIndex'); define(getURLQueryVariables, 'getURLQueryVariables'); define(validateEmail, 'validateEmail'); define(ajax, 'ajax'); define(debounce, 'debounce'); function getPropValue(name) { return Object.getOwnPropertyDescriptor(window.DS, name).value; }; function define(func, name) { return Object.defineProperty(window.DS, name, { value:func, enumerable: false, writable: false, configurable: false }); }; function query(selector, context) { context = context || document; if (/^(#?[\w-]+|\.[\w-.]+)$/.test(selector)) { switch (selector.charAt(0)) { case '#': return [context.getElementById(selector.substr(1))]; case '.': var classes = selector.substr(1).replace(/\./g, ' '); return [].slice.call(context.getElementsByClassName(classes)); default: return [].slice.call(context.getElementsByTagName(selector)); } } return [].slice.call(context.querySelectorAll(selector)); }; function getElementIndex(node) { var index = 0; while ( (node = node.previousElementSibling) ) { index++; } return index; }; function id(id) { return document.getElementById(id); }; function cl(classname, parent) { if(parent){ return parent.querySelectorAll('.' + classname); } else { return document.getElementsByClassName(classname); } }; function tag(tag, parent) { if(parent) { return parent.querySelectorAll(tag); } else { return document.getElementsByTagName(tag); } }; function childWithClass(element, classname) { var ar = []; for (var i = 0; i < element.childNodes.length; i++) { if (doc.childNodes[i].className == classname) { ar.push(doc.childNodes[i]); } } }; function eAddAll(object, type, listenFunction) { for(var i=0;i<object.length;i++) { object[i].addEventListener(type, listenFunction); } }; function eRmAll(object, type, listenFunction) { for(var i=0;i<object.length;i++) { object[i].addEventListener(type, listenFunction); } }; function addClass(element, classname) { if(element.length) { for(var i=0;i<element.length;i++) { element[i].classList.add(classname); } } else { element.classList.add(classname); } }; function removeClass(element, classname) { if(element.length) { for(var i=0;i<element.length;i++) { element[i].classList.remove(classname); } } else { element.classList.remove(classname); } }; function toggleClass(element, classname) { if(element.length) { for(var i=0;i<element.length;i++) { if(element[i].classList.contains(classname)) { element[i].classList.remove(classname); } else { element[i].classList.add(classname); } } } else { if(element.classList.contains(classname)) { element.classList.remove(classname); } else { element.classList.add(classname); } } }; function getClosestParent ( elem, selector ) { // Element.matches() polyfill if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function(s) { var matches = (this.document || this.ownerDocument).querySelectorAll(s), i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } // Get closest match for ( ; elem && elem !== document; elem = elem.parentNode ) { if ( elem.matches( selector ) ) return elem; } return null; }; function getURLQueryVariables(qstr) { qstr = qstr.split('?'); qstr = qstr[1]; var query = {}; var a = (qstr[0] === '?' ? qstr.substr(1) : qstr).split('&'); for (var i = 0; i < a.length; i++) { var b = a[i].split('='); query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || ''); } return query; }; function validateEmail(email) { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } function ajax(type, endpoint, data, callback) { var xhr = new XMLHttpRequest(); var url = endpoint + "?data=" + encodeURIComponent(JSON.stringify(data/*{"form_key": "form_keyValue", "password": "101010"}*/)); xhr.open(type, url, true); xhr.setRequestHeader("Content-type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json); return callback(json); } }; xhr.send(); }; function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; })(); var onYouTubeIframeAPIReady; (function() { 'use strict'; //Required base functions var base = Object.getOwnPropertyDescriptor(window.DS, 'base').value, query = base('query'), id = base('id'), cl = base('cl'), tag = base('tag'), eAddAll = base('eAddAll'), eRmAll = base('eRmAll'), addClass = base('addClass'), removeClass = base('removeClass'), toggleClass = base('toggleClass'), getURLQueryVariables = base('getURLQueryVariables'); window.DS.video = function() { var self = this, videoBtns = cl('cta-video'); var videoModalHTML; videoModalHTML +='<div id="video-modal">'; videoModalHTML +=' <div class="bk"></div>'; videoModalHTML +=' <div class="player" id="plaer">'; videoModalHTML +=' <a href="" title="close" class="close">Close</a>' videoModalHTML +=' <div id="video-container">'; videoModalHTML +=' </div>'; videoModalHTML +=''; videoModalHTML +=' <div class="controls">'; videoModalHTML +=' <div class="playpause" title="Play/Pause">'; videoModalHTML +=' <span class="play"></span>'; videoModalHTML +=' <span class="pause"></span>'; videoModalHTML +=' </div>'; videoModalHTML +=' <div class="progress" title="Video Progress">'; videoModalHTML +=' <span class="progress-time"><span class="progress-time-value">0:00</span></span>'; videoModalHTML +=' <div class="progress-bar-wrapper">'; videoModalHTML +=' <progress class="progress-bar" value="0" max="100"></progress>'; videoModalHTML +=' </div>'; videoModalHTML +=' <span class="total-time"><span class="progress-total-value">0:00</span></span>'; videoModalHTML +=' </div>'; videoModalHTML +=' <div class="volume">'; videoModalHTML +=' <div class="on-off-region" title="Volume on/off"></div>'; videoModalHTML +=' <div class="level-region" data-vol="100">'; videoModalHTML +=' <div class="bar-1 volume-bar" title="Volume 33%"></div>'; videoModalHTML +=' <div class="bar-2 volume-bar" title="Volume 66%"></div>'; videoModalHTML +=' <div class="bar-3 volume-bar" title="Volume 100%"></div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' <div class="fullscreen" title="View fullscreen">'; videoModalHTML +=''; videoModalHTML +=' <div class="region-container">'; videoModalHTML +=' <div class="region-tl"></div>'; videoModalHTML +=' <div class="region-tr"></div>'; videoModalHTML +=' <div class="region-bl"></div>'; videoModalHTML +=' <div class="region-br"></div>'; videoModalHTML +=''; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; videoModalHTML +=' </div>'; //console.log(videoModalHTML); init(); function init() { _checkforVideos(); } function _checkforVideos() { var ctas = query('.cta-video'); if(ctas.length) { _initializeAPI(); _listen(); } }; function _listen() { eAddAll(videoBtns, 'click', _buildVideoPlayer) } function _initializeAPI() { var tag = document.createElement('script'), firstScriptTag = document.getElementsByTagName('script')[0]; tag.setAttribute('id', 'youtube-scripts'); tag.src = "https://www.youtube.com/iframe_api"; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); }; function _buildVideoPlayer(e) { e.preventDefault(); var _this = this, videoURL = _this.getAttribute('data-video'), queryObject = getURLQueryVariables(videoURL), videoID = queryObject.v, player, videoProgressInterval, videoDuration, videoLength, curPercentage = 0; document.getElementById('vp-wrap').insertAdjacentHTML( 'beforeend', videoModalHTML ); afterModalAppended(); function afterModalAppended() { var videoModal = id('video-modal'), closeBTN = query('.close', videoModal), playpauseBTN = query('.playpause', videoModal), curDurationHTML = query('.progress-time-value', videoModal), totalDurationHTML = query('.progress-total-value', videoModal), progressBarWrapper = query('.progress-bar-wrapper', videoModal), progressBar = query('.progress-bar', videoModal), soundOnOff = query('.on-off-region', videoModal), levelRegion = query('.level-region', videoModal), levelBars = query('.volume-bar', videoModal), videoPlayer = id('plaer'), iframeButton = query('.fullscreen'); _createPlayer(); function secToMinute(s){return(s-(s%=60))/60+(9<s?':':':0')+s} function videoPlayerListeners() { closeBTN[0].addEventListener('click', _closeVideoModal); playpauseBTN[0].addEventListener('click', _playPauseVideo); progressBarWrapper[0].addEventListener('click', _updateProgress); soundOnOff[0].addEventListener('click', _toggleSound); eAddAll(levelBars, 'click', _updateLevelByBar); iframeButton[0].addEventListener('click', _triggerFullscreen); }; function _closeVideoModal(e) { e.preventDefault(); closeBTN[0].removeEventListener('click', _closeVideoModal); playpauseBTN[0].removeEventListener('click', _playPauseVideo); progressBarWrapper[0].removeEventListener('click', _updateProgress); soundOnOff[0].removeEventListener('click', _toggleSound); eRmAll(levelBars, 'click', _updateLevelByBar); iframeButton[0].removeEventListener('click', _triggerFullscreen); clearInterval(videoProgressInterval); videoProgressInterval = null; player.destroy(); id('vp-wrap').removeChild(videoModal); return false; }; function _playPauseVideo(e) { e.preventDefault(); var playerState = player.getPlayerState(); switch(playerState) { case 1: player.pauseVideo(); break; case 2: player.playVideo(); break; } return false; }; function _updateProgress(e) { var _this = this, percentage = e.offsetX/_this.offsetWidth; player.seekTo(player.getDuration() * percentage); }; function _toggleSound(e) { var _this = this, curVol = player.getVolume(); if(curVol>0) { player.setVolume(0); levelRegion[0].setAttribute('data-vol', 0); } else { levelRegion[0].setAttribute('data-vol', 100); player.setVolume(100); } }; function _updateLevelByBar(e) { var _this = this; if(_this.classList.contains('bar-1')) { player.setVolume(33); levelRegion[0].setAttribute('data-vol', 33); } else if(_this.classList.contains('bar-2')) { player.setVolume(66); levelRegion[0].setAttribute('data-vol', 66); } else if(_this.classList.contains('bar-3')) { player.setVolume(100); levelRegion[0].setAttribute('data-vol', 100); } }; function _triggerFullscreen(e) { var iframe = videoPlayer; var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen || iframe.msRequestFullscreen; var exitFullScreen = iframe.exitFullscreen || iframe.webkitExitFullscreen || iframe.mozCancelFullScreen || iframe.msExitFullscreen; var fullscreenEnabled = iframe.fullscreenEnabled || iframe.webkitFullscreenEnabled || iframe.mozFullScreenEnabled || iframe.msFullscreenEnabled; var docFS = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; //iframe.classList.contains('fullscreen') ? isFS = true : isFS = false; iframe.addEventListener("fullscreenchange", fullScreenOnEsc); iframe.addEventListener("webkitfullscreenchange", fullScreenOnEsc); iframe.addEventListener("mozfullscreenchange", fullScreenOnEsc); iframe.addEventListener("MSFullscreenChange", fullScreenOnEsc); if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (requestFullScreen) { requestFullScreen.bind(iframe)(); //console.log('enter click'); } } function fullScreenOnEsc() { if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { addClass(iframe, 'fullscreen'); } else { removeClass(iframe, 'fullscreen'); } }; }; function _createPlayer() { player = new YT.Player('video-container', { height: '100%', width: '100%', videoId: videoID, playerVars: { controls:0, enablejsapi:1, modestbranding:1, showinfo:0, rel: 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { videoPlayerListeners(); videoLength = secToMinute(player.getDuration()); totalDurationHTML[0].innerHTML = videoLength; event.target.playVideo(); } function onPlayerStateChange(event) { switch(event.data) { case 0: //ENDED removeClass(playpauseBTN, 'playing'); clearInterval(videoProgressInterval); videoProgressInterval = null; break; case 1: //PLAYING addClass(playpauseBTN, 'playing'); videoProgressInterval = setInterval(_checkVideoProgress, 500); break; case 2: //PAUSED removeClass(playpauseBTN, 'playing'); clearInterval(videoProgressInterval); videoProgressInterval = null; break; case 3: //BUFFERING break; case -1: //UNSTARTED break; case 5: //CUED break; } } function _checkVideoProgress() { var curTime = secToMinute(Math.floor(player.getCurrentTime())), totalPercentage = Math.ceil((player.getCurrentTime()/player.getDuration())*100); curDurationHTML[0].innerHTML = curTime; if(curPercentage!==totalPercentage) { curPercentage = totalPercentage; progressBar[0].setAttribute('value', curPercentage); } } }; return false; } }; //$ using jQuery, pass jQuery to function above - (function($) { - below - })(jQuery); //$(document).ready(function() { document.addEventListener("DOMContentLoaded", function(event) { console.log("video.js - DOM loaded and parsed"); var dsObject = new window.DS.video(); }); //}); })();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
New
Define
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):
I'm ready to help. You can ask your question about the code snippet, and I'll do my best to assist you.
Related benchmarks:
Map .has() vs .get()
Map .has() only vs .get() only
forEach vs for vs while vs kijs.each
Simple Array vs Array.from()
.slice() with .push() VS .slice() with .splice()
Comments
Confirm delete:
Do you really want to delete benchmark?