Поведение контролов как в YouTube?

Question

[thehighhomie]

Каким образом можно реализовать скрытие и показ контролов как в yotube? к примеру открыл видео, через несколько секунд пропадают контролы (назад, вперед, мут, плей и т.д.).

Первое на ум приходит - повесить на контейнер обработчик 'mousemove' и в нем описать все, но мне кажется, что это делается намного проще. За не имением достаточного опыта разработки ui, я не могу найти лучшее решение.

Answer 1

[Алексей Лауд]

Не уверен в оптимальности, но:
При mousemove над плеером отображаешь контролы и создаешь таймаут для их скрытия. Прошлый таймаут, если он был, удаляешь. Если движения не будет достаточно долго, сработает таймаут и произойдет скрытие контролов.

Comments

[thehighhomie]

спасибо) я тоже так придумал сначала) но мне кажется это не очень хорошая идея

[Stalker_RED]

thehighhomie, почему нет?

[thehighhomie]

Stalker_RED, ну я сделал так уже. просто я не хочу, чтобы постоянно mousemove срабатывал при движениях мыши. я хотел повесить на контейнер событие mouseover и затригерить mouseout когда надо, но mouseout не существует) я хз как в jquery это сделано, но на pure js я не знаю как реализовать...

[Stalker_RED]

но mouseout не существует

о_О https://developer.mozilla.org/en-US/docs/Web/Event...

Только вы определитесь, как в ютубе или не как в ютубе. Потому что на ютубе они скрываются даже если мышь не убирать. Тем более, что возможен фуллскрин, когда мышь вообще сложновато убрать.

[thehighhomie]

Stalker_RED, я имел ввиду тригера mouseout не существует, я не могу вызвать mouseout у элемента:
elem.mouseout() // я про это имел ввиду

Answer 2

[Stalker_RED]

let hideControlsTimer = null;
players.addEventListener('mousemove', updateHideControlsTimer)
players.addEventListener('click', updateHideControlsTimer)

function updateHideControlsTimer(){
  if (hideControlsTimer) clearTimeout(hideControlsTimer)
  hideControlsTimer = setTimeout(hideControls, 2000)
}

function hideControls(){
  hideControlsTimer = null
  controls.classList.add('fade')
}

Comments

[thehighhomie]

спасибо) код помог) я похоже написал, но немного не правильно, так что взял ваш код)

Answer 3

[frees2]

.wm { margin-top: 20%; transition: margin .1s ease-out .05s;}
.wm2 { margin-top: 0; transition: margin .1s ease-out .05s;}

if (x.className === "wm" ) {
	
x.className = "wm2"; 
	
	
	
	} else {x.className = "wm";  };

Comments

[thehighhomie]

ахах) это что?)

[frees2]

thehighhomie, плавное скрытие и показ, часть какой нибудь функции, клик или mousemove', или так по выполнению.

[thehighhomie]

frees2, спасибо!

[frees2]

thehighhomie, Пр. прощения, мой пример, по клику, а не мыши, но можно и мыши. Работающий пример, прячем и открываем какие то настройки, в мышином варианте можно таймер прописать в стилях, двинули мышью, настройки появились, убрали уплыли

var idVhod = document.getElementById('idVhod'); function onclickVhod() {

idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline';
var x = document.querySelector('article');

if (x.className === "wm" ) {
	
x.className = "wm2"; 
	
	
	
	} else {x.className = "wm";  };

localStorage.setItem('hide', idVhod.style.display);}if(localStorage.getItem('hide') == 'inline') { 
document.getElementById('idVhod').style.display = 'inline'; 
document.querySelector('article').className= "wm";

[thehighhomie]

frees2, спасибо)