Eduard Kuzmenko
4 years ago
6 changed files with 487 additions and 304 deletions
@ -1,280 +1,328 @@ |
|||||||
String.prototype.toHHMMSS = function() { |
(function () { |
||||||
|
if (typeof NodeList.prototype.forEach === "function") return false; |
||||||
|
NodeList.prototype.forEach = Array.prototype.forEach; |
||||||
|
})(); |
||||||
|
|
||||||
|
String.prototype.toHHMMSS = function(leadZero) { |
||||||
let sec_num = parseInt(this, 10); |
let sec_num = parseInt(this, 10); |
||||||
let hours = Math.floor(sec_num / 3600); |
let hours = Math.floor(sec_num / 3600); |
||||||
let minutes = Math.floor((sec_num - (hours * 3600)) / 60); |
let minutes = Math.floor((sec_num - (hours * 3600)) / 60); |
||||||
let seconds = sec_num - (hours * 3600) - (minutes * 60); |
let seconds = sec_num - (hours * 3600) - (minutes * 60); |
||||||
|
|
||||||
if(hours < 10) hours = "0" + hours; |
if(hours < 10) hours = "0" + hours; |
||||||
if(minutes < 10) minutes = minutes; |
if(minutes < 10) minutes = leadZero ? "0" + minutes : minutes; |
||||||
if(seconds < 10) seconds = "0" + seconds; |
if(seconds < 10) seconds = "0" + seconds; |
||||||
return minutes + ':' + seconds; |
return minutes + ':' + seconds; |
||||||
} |
} |
||||||
|
|
||||||
function stylePlayer(player, video) { |
function stylePlayer(player, video) { |
||||||
let skin = attachSkin(video.dataset.ckin); |
let skin = attachSkin(video.dataset.ckin); |
||||||
player.classList.add(skin); |
player.classList.add(skin); |
||||||
|
|
||||||
let overlay = video.dataset.overlay; |
|
||||||
addOverlay(player, overlay); |
|
||||||
|
|
||||||
let html = buildControls(skin); |
|
||||||
player.insertAdjacentHTML('beforeend', html); |
|
||||||
|
|
||||||
var stopAndScrubTimeout = 0; |
let html = buildControls(skin); |
||||||
|
player.insertAdjacentHTML('beforeend', html); |
||||||
if(skin === 'default') { |
let updateInterval = 0; |
||||||
var progress = player.querySelector('.progress');; |
let elapsed = 0; |
||||||
var progressBar = player.querySelector('.progress__filled'); |
let prevTime = 0; |
||||||
var toggle = player.querySelectorAll('.toggle'); |
|
||||||
var fullScreenButton = player.querySelector('.fullscreen'); |
if (skin === 'default') { |
||||||
var seek = player.querySelector('#seek'); |
var progress = player.querySelector('.progress');; |
||||||
var timeElapsed = player.querySelector('#time-elapsed'); |
var progressBar = player.querySelector('.progress__filled'); |
||||||
var timeDuration = player.querySelector('#time-duration'); |
var toggle = player.querySelectorAll('.toggle'); |
||||||
seek.setAttribute('max', video.duration); |
var fullScreenButton = player.querySelector('.fullscreen'); |
||||||
timeDuration.innerHTML = String(video.duration | 0).toHHMMSS(); |
var seek = player.querySelector('#seek'); |
||||||
|
var timeElapsed = player.querySelector('#time-elapsed'); |
||||||
toggle.forEach((button) => { |
var timeDuration = player.querySelector('#time-duration'); |
||||||
return button.addEventListener('click', () => { |
timeDuration.innerHTML = String(video.duration | 0).toHHMMSS(); |
||||||
togglePlay(video, player); |
|
||||||
}); |
toggle.forEach((button) => { |
||||||
}); |
return button.addEventListener('click', () => { |
||||||
|
togglePlay(video, player); |
||||||
video.addEventListener('click', function() { |
}); |
||||||
togglePlay(this, player); |
}); |
||||||
}); |
|
||||||
|
video.addEventListener('click', function () { |
||||||
video.addEventListener('play', function() { |
togglePlay(this, player); |
||||||
updateButton(this, toggle); |
}); |
||||||
}); |
|
||||||
|
video.addEventListener('play', function () { |
||||||
video.addEventListener('pause', function() { |
updateButton(this, toggle); |
||||||
updateButton(this, toggle); |
updateInterval = setInterval(function () { |
||||||
}); |
if (video.paused) return; //chtob ne prigal seek pri peremotke
|
||||||
|
//elapsed += 0.02; // Increase with timer interval
|
||||||
let mousedown = false; |
if (video.currentTime != prevTime) { |
||||||
progress.addEventListener('mousemove', (e) => { |
elapsed = video.currentTime; // Update if getCurrentTime was changed
|
||||||
return mousedown && scrub(e, video, progress); |
prevTime = video.currentTime; |
||||||
}); |
} |
||||||
progress.addEventListener('mousedown', (e) => { |
let scaleX = (elapsed / video.duration); |
||||||
//console.log(video.currentTime);
|
progressBar.style.transform = 'scaleX(' + scaleX + ')'; |
||||||
scrub(e, video, progress, progressBar); |
if (video.paused) clearInterval(updateInterval); |
||||||
//Таймер для того, чтобы стопать видео, если зажал мышку и не отпустил клик
|
seek.value = video.currentTime * 1000; |
||||||
stopAndScrubTimeout = setTimeout(function() { |
}, 20); |
||||||
togglePlay(video, player, 1); |
}); |
||||||
}, 150); |
|
||||||
|
video.addEventListener('ended', function () { |
||||||
return mousedown = true; |
progressBar.style.transform = 'scaleX(1)'; |
||||||
}); |
seek.value = video.currentTime * 1000; |
||||||
progress.addEventListener('mouseup', () => { |
}); |
||||||
clearTimeout(stopAndScrubTimeout); |
|
||||||
togglePlay(video, player, 0); |
video.addEventListener('pause', function () { |
||||||
return mousedown = false; |
updateButton(this, toggle); |
||||||
}); |
clearInterval(updateInterval); |
||||||
fullScreenButton.addEventListener('click', (e) => { |
}); |
||||||
return toggleFullScreen(player, fullScreenButton); |
|
||||||
}); |
video.addEventListener('dblclick', function () { |
||||||
addListenerMulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', (e) => { |
return toggleFullScreen(player, fullScreenButton); |
||||||
return onFullScreen(e, player); |
}) |
||||||
}); |
|
||||||
} |
let mousedown = false; |
||||||
|
let stopAndScrubTimeout = 0; |
||||||
if(skin === 'circle') { |
progress.addEventListener('mousemove', (e) => { |
||||||
let wrapper = document.createElement('div'); |
return mousedown && scrub(e, video, progress, progressBar); |
||||||
wrapper.classList.add('circle-time-left'); |
}); |
||||||
video.parentNode.insertBefore(wrapper, video); |
progress.addEventListener('mousedown', (e) => { |
||||||
wrapper.innerHTML = '<div class="circle-time"></div><div class="iconVolume tgico-nosound"></div>'; |
scrub(e, video, progress, progressBar, updateInterval); |
||||||
|
//Таймер для того, чтобы стопать видео, если зажал мышку и не отпустил клик
|
||||||
var circle = player.querySelector('.progress-ring__circle'); |
stopAndScrubTimeout = setTimeout(function () { |
||||||
var radius = circle.r.baseVal.value; |
togglePlay(video, player, 1); |
||||||
var circumference = 2 * Math.PI * radius; |
}, 150); |
||||||
var timeDuration = player.querySelector('.circle-time'); |
|
||||||
var iconVolume = player.querySelector('.iconVolume'); |
return mousedown = true; |
||||||
circle.style.strokeDasharray = `${circumference} ${circumference}`; |
}); |
||||||
circle.style.strokeDashoffset = circumference; |
progress.addEventListener('mouseup', () => { |
||||||
circle.addEventListener('click', () => { |
if (typeof stopAndScrubTimeout !== 'undefined') { |
||||||
togglePlay(video, player); |
clearTimeout(stopAndScrubTimeout); |
||||||
}); |
} |
||||||
|
togglePlay(video, player, 0); |
||||||
video.addEventListener('play', () => { |
return mousedown = false; |
||||||
iconVolume.style.display = 'none'; |
}); |
||||||
}); |
fullScreenButton.addEventListener('click', (e) => { |
||||||
|
return toggleFullScreen(player, fullScreenButton); |
||||||
video.addEventListener('pause', () => { |
}); |
||||||
iconVolume.style.display = ''; |
addListenerMulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', (e) => { |
||||||
}); |
return onFullScreen(e, player); |
||||||
} |
}); |
||||||
|
} |
||||||
//Для хрома
|
|
||||||
timeDuration.innerHTML = String(video.duration | 0).toHHMMSS(); |
if (skin === 'circle') { |
||||||
if(skin === 'default') seek.setAttribute('max', video.duration); |
let wrapper = document.createElement('div'); |
||||||
//Для Opera / Safari / IE
|
wrapper.classList.add('circle-time-left'); |
||||||
video.addEventListener('loadeddata', function() { |
video.parentNode.insertBefore(wrapper, video); |
||||||
timeDuration.innerHTML = String(video.duration | 0).toHHMMSS(); |
wrapper.innerHTML = '<div class="circle-time"></div><div class="iconVolume tgico-nosound"></div>'; |
||||||
if(skin === 'default') seek.setAttribute('max', video.duration); |
|
||||||
}) |
var circle = player.querySelector('.progress-ring__circle'); |
||||||
|
var radius = circle.r.baseVal.value; |
||||||
video.addEventListener('timeupdate', function() { |
var circumference = 2 * Math.PI * radius; |
||||||
handleProgress(this, skin, timeDuration, circumference, circle, progressBar, seek, timeElapsed); |
var timeDuration = player.querySelector('.circle-time'); |
||||||
}); |
var iconVolume = player.querySelector('.iconVolume'); |
||||||
|
circle.style.strokeDasharray = circumference + ' ' + circumference; |
||||||
|
circle.style.strokeDashoffset = circumference; |
||||||
|
circle.addEventListener('click', () => { |
||||||
|
togglePlay(video, player); |
||||||
|
}); |
||||||
|
|
||||||
|
video.addEventListener('play', () => { |
||||||
|
iconVolume.style.display = 'none'; |
||||||
|
updateInterval = setInterval(function () { |
||||||
|
//elapsed += 0.02; // Increase with timer interval
|
||||||
|
if (video.currentTime != prevTime) { |
||||||
|
elapsed = video.currentTime; // Update if getCurrentTime was changed
|
||||||
|
prevTime = video.currentTime; |
||||||
|
} |
||||||
|
let offset = circumference - elapsed / video.duration * circumference; |
||||||
|
circle.style.strokeDashoffset = offset; |
||||||
|
if (video.paused) clearInterval(updateInterval); |
||||||
|
}, 20); |
||||||
|
}); |
||||||
|
|
||||||
|
video.addEventListener('pause', () => { |
||||||
|
iconVolume.style.display = ''; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//Для хрома
|
||||||
|
timeDuration.innerHTML = String(Math.round(video.duration)).toHHMMSS(); |
||||||
|
if (skin === 'default') seek.setAttribute('max', video.duration * 1000); |
||||||
|
//Для Opera / Safari / IE
|
||||||
|
video.addEventListener('loadeddata', function () { |
||||||
|
timeDuration.innerHTML = String(Math.round(video.duration)).toHHMMSS(); |
||||||
|
if (skin === 'default') seek.setAttribute('max', video.duration * 1000); |
||||||
|
}) |
||||||
|
|
||||||
|
video.addEventListener('timeupdate', function () { |
||||||
|
updateInterval = handleProgress(this, skin, timeDuration, circumference, circle, progressBar, seek, timeElapsed, updateInterval); |
||||||
|
}); |
||||||
} |
} |
||||||
|
|
||||||
function showControls(video) { |
function showControls(video) { |
||||||
video.setAttribute("controls", "controls"); |
video.setAttribute("controls", "controls"); |
||||||
} |
} |
||||||
|
|
||||||
function togglePlay(video, player, stop) { |
function togglePlay(video, player, stop) { |
||||||
if(stop == 1) { |
if (stop == 1) { |
||||||
video['pause'](); |
video['pause'](); |
||||||
player.classList.remove('is-playing'); |
player.classList.remove('is-playing'); |
||||||
return; |
return; |
||||||
} else if(stop == 0) { |
} else if (stop == 0) { |
||||||
video['play'](); |
video['play'](); |
||||||
player.classList.add('is-playing'); |
player.classList.add('is-playing'); |
||||||
return; |
return; |
||||||
} |
} |
||||||
|
|
||||||
let method = video.paused ? 'play' : 'pause'; |
let method = video.paused ? 'play' : 'pause'; |
||||||
video[method](); |
video[method](); |
||||||
video.paused ? player.classList.remove('is-playing') : player.classList.add('is-playing'); |
video.paused ? player.classList.remove('is-playing') : player.classList.add('is-playing'); |
||||||
} |
} |
||||||
|
|
||||||
function updateButton(video, toggle) { |
function updateButton(video, toggle) { |
||||||
let icon = video.paused ? 'tgico-play' : 'tgico-pause'; |
let icon = video.paused ? 'tgico-play' : 'tgico-pause'; |
||||||
toggle.forEach((button) => { |
toggle.forEach((button) => { |
||||||
button.classList.remove('tgico-play', 'tgico-pause'); |
button.classList.remove('tgico-play', 'tgico-pause'); |
||||||
button.classList.add(icon); |
button.classList.add(icon); |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
function handleProgress(video, skin, timeDuration, circumference, circle, progressBar, seek, timeElapsed) { |
function handleProgress(video, skin, timeDuration, circumference, circle, progressBar, seek, timeElapsed, updateInterval, mousemove) { |
||||||
let percent = video.currentTime / video.duration * 100; |
clearInterval(updateInterval); |
||||||
if(skin === 'default') { |
let elapsed = 0; |
||||||
progressBar.style.width = percent + '%'; |
let prevTime = 0; |
||||||
seek.value = video.currentTime; |
if (skin === 'default') { |
||||||
timeElapsed.innerHTML = String(video.currentTime | 0).toHHMMSS(); |
updateInterval = setInterval(function () { |
||||||
} else if(skin === 'circle') { |
if (video.paused) return; |
||||||
let timeLeft = String((video.duration - video.currentTime) | 0).toHHMMSS(); |
if (video.currentTime != prevTime) { |
||||||
let offset = circumference - percent / 100 * circumference; |
elapsed = video.currentTime; // Update if getCurrentTime was changed
|
||||||
circle.style.strokeDashoffset = offset; |
prevTime = video.currentTime; |
||||||
if(timeLeft != 0 | 0) timeDuration.innerHTML = timeLeft; |
} |
||||||
} |
let scaleX = (elapsed / video.duration); |
||||||
|
progressBar.style.transform = 'scaleX(' + scaleX + ')'; |
||||||
|
if (video.paused) clearInterval(updateInterval); |
||||||
|
seek.value = video.currentTime * 1000; |
||||||
|
}, 20); |
||||||
|
timeElapsed.innerHTML = String(video.currentTime | 0).toHHMMSS(); |
||||||
|
return updateInterval; |
||||||
|
} else if (skin === 'circle') { |
||||||
|
updateInterval = setInterval(function () { |
||||||
|
if (video.currentTime != prevTime) { |
||||||
|
elapsed = video.currentTime; // Update if getCurrentTime was changed
|
||||||
|
prevTime = video.currentTime; |
||||||
|
} |
||||||
|
let offset = circumference - elapsed / video.duration * circumference; |
||||||
|
circle.style.strokeDashoffset = offset; |
||||||
|
if (video.paused) clearInterval(updateInterval); |
||||||
|
}, 20); |
||||||
|
let timeLeft = String((video.duration - video.currentTime) | 0).toHHMMSS(); |
||||||
|
if (timeLeft != 0 | 0) timeDuration.innerHTML = timeLeft; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
function scrub(e, video, progress) { |
function scrub(e, video, progress, progressBar) { |
||||||
let scrubTime = e.offsetX / progress.offsetWidth * video.duration; |
let scrubTime = e.offsetX / progress.offsetWidth * video.duration; |
||||||
video.currentTime = scrubTime; |
video.currentTime = scrubTime; |
||||||
|
let scaleX = scrubTime / video.duration; |
||||||
|
|
||||||
|
if (scaleX > 1) scaleX = 1; |
||||||
|
if (scaleX < 0) scaleX = 0; |
||||||
|
|
||||||
|
progressBar.style.transform = 'scaleX(' + scaleX + ')'; |
||||||
} |
} |
||||||
|
|
||||||
export function wrapPlayer(video) { |
export function wrapPlayer(video) { |
||||||
let wrapper = document.createElement('div'); |
let wrapper = document.createElement('div'); |
||||||
wrapper.classList.add('ckin__player'); |
wrapper.classList.add('ckin__player'); |
||||||
|
|
||||||
video.parentNode.insertBefore(wrapper, video); |
video.parentNode.insertBefore(wrapper, video); |
||||||
wrapper.appendChild(video); |
wrapper.appendChild(video); |
||||||
|
|
||||||
stylePlayer(wrapper, video); |
stylePlayer(wrapper, video); |
||||||
|
|
||||||
return wrapper; |
return wrapper; |
||||||
} |
} |
||||||
|
|
||||||
function buildControls(skin) { |
function buildControls(skin) { |
||||||
let html = []; |
let html = []; |
||||||
if(skin === 'default') { |
if (skin === 'default') { |
||||||
html.push('<button class="' + skin + '__button--big toggle tgico-largeplay" title="Toggle Play"></button>'); |
html.push('<button class="' + skin + '__button--big toggle tgico-largeplay" title="Toggle Play"></button>'); |
||||||
html.push('<div class="' + skin + '__controls ckin__controls">'); |
html.push('<div class="' + skin + '__gradient-bottom ckin__controls"></div>'); |
||||||
html.push('<div class="progress">', |
html.push('<div class="' + skin + '__controls ckin__controls">'); |
||||||
'<div class="progress__filled"></div><input class="seek" id="seek" value="0" min="0" type="range" step="0.1" max="0">', |
html.push('<div class="progress">', |
||||||
'</div>', |
'<div class="progress__filled"></div><input class="seek" id="seek" value="0" min="0" type="range" step="0.1" max="0">', |
||||||
'<div class="bottom-controls">', |
'</div>', |
||||||
'<div class="left-controls"><button class="' + skin + '__button toggle tgico-play" title="Toggle Video"></button>', |
'<div class="bottom-controls">', |
||||||
'<div class="time">', |
'<div class="left-controls"><button class="' + skin + '__button toggle tgico-play" title="Toggle Video"></button>', |
||||||
'<time id="time-elapsed">0:00</time>', |
'<div class="time">', |
||||||
'<span> / </span>', |
'<time id="time-elapsed">0:00</time>', |
||||||
'<time id="time-duration">0:00</time>', |
'<span> / </span>', |
||||||
'</div>', |
'<time id="time-duration">0:00</time>', |
||||||
'</div>', |
'</div>', |
||||||
'<div class="right-controls"><button class="' + skin + '__button fullscreen tgico-fullscreen" title="Full Screen"></button></div></div>'); |
'</div>', |
||||||
html.push('</div>'); |
'<div class="right-controls"><button class="' + skin + '__button fullscreen tgico-fullscreen" title="Full Screen"></button></div></div>'); |
||||||
} else if(skin === 'circle') { |
html.push('</div>'); |
||||||
html.push('<svg class="progress-ring" width="200px" height="200px">', |
} else if (skin === 'circle') { |
||||||
'<circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="3.5" cx="100" cy="100" r="93" fill="transparent"/>', |
html.push('<svg class="progress-ring" width="200px" height="200px">', |
||||||
'</svg>'); |
'<circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="3.5" cx="100" cy="100" r="93" fill="transparent" transform="rotate(-90, 100, 100)"/>', |
||||||
} |
'</svg>'); |
||||||
|
} |
||||||
return html.join(''); |
|
||||||
} |
|
||||||
|
|
||||||
function attachSkin(skin) { |
return html.join(''); |
||||||
console.log("skin: " + skin); |
|
||||||
if(typeof skin != 'undefined' && skin != '') { |
|
||||||
return skin; |
|
||||||
} else { |
|
||||||
return 'default'; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
function addOverlay(player, overlay) { |
function attachSkin(skin) { |
||||||
if(overlay == 1) { |
console.log("skin: " + skin); |
||||||
player.classList.add('ckin__overlay'); |
if (typeof skin != 'undefined' && skin != '') { |
||||||
} else { |
return skin; |
||||||
return; |
} else { |
||||||
} |
return 'default'; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
function toggleFullScreen(player, fullScreenButton) { |
function toggleFullScreen(player, fullScreenButton) { |
||||||
// alternative standard method
|
// alternative standard method
|
||||||
if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { |
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { |
||||||
player.classList.add('ckin__fullscreen'); |
player.classList.add('ckin__fullscreen'); |
||||||
|
|
||||||
if(player.requestFullscreen) { |
if (player.requestFullscreen) { |
||||||
player.requestFullscreen(); |
player.requestFullscreen(); |
||||||
} else if(player.mozRequestFullScreen) { |
} else if (player.mozRequestFullScreen) { |
||||||
player.mozRequestFullScreen(); // Firefox
|
player.mozRequestFullScreen(); // Firefox
|
||||||
} else if(player.webkitRequestFullscreen) { |
} else if (player.webkitRequestFullscreen) { |
||||||
player.webkitRequestFullscreen(); // Chrome and Safari
|
player.webkitRequestFullscreen(); // Chrome and Safari
|
||||||
} else if(player.msRequestFullscreen) { |
} else if (player.msRequestFullscreen) { |
||||||
player.msRequestFullscreen(); |
player.msRequestFullscreen(); |
||||||
} |
} |
||||||
|
|
||||||
fullScreenButton.classList.remove('tgico-fullscreen'); |
fullScreenButton.classList.remove('tgico-fullscreen'); |
||||||
fullScreenButton.classList.add('tgico-smallscreen'); |
fullScreenButton.classList.add('tgico-smallscreen'); |
||||||
fullScreenButton.setAttribute('title', 'Exit Full Screen'); |
fullScreenButton.setAttribute('title', 'Exit Full Screen'); |
||||||
} else { |
} else { |
||||||
player.classList.remove('ckin__fullscreen'); |
player.classList.remove('ckin__fullscreen'); |
||||||
|
|
||||||
if(document.cancelFullScreen) { |
if (document.cancelFullScreen) { |
||||||
document.cancelFullScreen(); |
document.cancelFullScreen(); |
||||||
} else if(document.mozCancelFullScreen) { |
} else if (document.mozCancelFullScreen) { |
||||||
document.mozCancelFullScreen(); |
document.mozCancelFullScreen(); |
||||||
} else if(document.webkitCancelFullScreen) { |
} else if (document.webkitCancelFullScreen) { |
||||||
document.webkitCancelFullScreen(); |
document.webkitCancelFullScreen(); |
||||||
} else if(document.msExitFullscreen) { |
} else if (document.msExitFullscreen) { |
||||||
document.msExitFullscreen(); |
document.msExitFullscreen(); |
||||||
} |
} |
||||||
|
|
||||||
fullScreenButton.classList.remove('tgico-smallscreen'); |
fullScreenButton.classList.remove('tgico-smallscreen'); |
||||||
fullScreenButton.classList.add('tgico-fullscreen'); |
fullScreenButton.classList.add('tgico-fullscreen'); |
||||||
fullScreenButton.setAttribute('title', 'Full Screen'); |
fullScreenButton.setAttribute('title', 'Full Screen'); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
function onFullScreen(e, player) { |
function onFullScreen(e, player) { |
||||||
let isFullscreenNow = document.webkitFullscreenElement !== null; |
let isFullscreenNow = document.webkitFullscreenElement !== null; |
||||||
if(!isFullscreenNow) { |
if (!isFullscreenNow) { |
||||||
player.classList.remove('ckin__fullscreen'); |
player.classList.remove('ckin__fullscreen'); |
||||||
|
} else { |
||||||
/* let el = player.querySelector('.fullscreen'); |
} |
||||||
el.classList.remove('tgico-smallscreen'); |
|
||||||
el.classList.add('tgico-fullscreen'); */ |
|
||||||
} else { |
|
||||||
// player.querySelector('.fullscreen').innerHTML = iconExpand;
|
|
||||||
|
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
function addListenerMulti(element, eventNames, listener) { |
function addListenerMulti(element, eventNames, listener) { |
||||||
let events = eventNames.split(' '); |
let events = eventNames.split(' '); |
||||||
for (let i = 0, iLen = events.length; i < iLen; i++) { |
for (let i = 0, iLen = events.length; i < iLen; i++) { |
||||||
element.addEventListener(events[i], listener, false); |
element.addEventListener(events[i], listener, false); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue