Jump to content
AndréAraujo

MouseMove sobre iframe, div e div em modo fullscreen

Recommended Posts

Olá pessoal, venho procurando uma maneira de fazer com que o evento mousemove

seja reconhecido quando executado sobre um iframe do YouTube, minha ideia inicial

foi sobrepor uma div ao iframe, mas o devido aos banners e anúncios em vídeo a ideia

se tornou inviável. Procurei por um bom tempo soluções, não encontrei nenhuma que eu

pudesse compreender e adaptar-la ao meu projeto.

Montei um pequena simulação do projeto para tornar mais fácil a exibição do problema:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>Documento sem título</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<style>
.area-mousemove{
	width:600px;
	height:500px;
	background-color:#09F;
	margin:0 auto;
}
.container{
	max-width:600px;
	max-height:337.5px;
	position:relative;
}
.container-player{
	padding-bottom:56.25%;
	height:0;
	background-color:#222;
}
#ytplayer{
	display:block;
}
.container-player iframe, .container-player object, .container-player embed{
	background-color:#000;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	z-index:1;
}
.controls{
	width:100%;
	height:40px;
	background-color:#F60;
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
	display:none;
}
.text{
	line-height:40px;
	margin-left:20px;
	font-family:Arial;
	font-size:18px;
	font-weight:700;
	color:#000;
	display:table;
	float:left;
	cursor:default;
}
.screen{
	line-height:40px;
	background-color:#222;
	margin-right:20px;
	padding:0 10px;
	font-family:Arial;
	font-size:18px;
	font-weight:700;
	color:#fff;
	float:right;
	cursor:pointer;
}
.close-screen{
	line-height:40px;
	background-color:#222;
	margin-right:20px;
	padding:0 10px;
	font-family:Arial;
	font-size:18px;
	font-weight:700;
	color:#fff;
	float:right;
	display:none;
	cursor:pointer;
}
</style>
<div class="area-mousemove">
    <div class="container">
        <div id="container-screen">
            <div class="container-player">
                <iframe id="ytplayer" type="text/html" src="https://www.youtube.com/embed/2TvNnW2Br70?controls=0&rel=0&showinfo=0"
        frameborder="0" allowfullscreen></iframe>
                <div class="controls"><span class="text">Controles</span><span class="screen start">Screen</span><span class="close-screen start">[ x ]</span></div>
            </div>
        </div>
    </div>
</div>

<script>
	$('.area-mousemove').mousemove(function(cursor){
		$('.controls').fadeIn(200);
		hideStart();
	});
	var timeout;
	function hideStart(){
		if(timeout !== undefined){
				clearTimeout(timeout);
		}
		timeout = setTimeout(function(){
			$('.controls').fadeOut(200);
		}, 2500);	
	}
	$('.controls span.start').on('click', function(a){
		$('.screen').hide();
		$('.close-screen').show();		
		var elem = document.getElementById("container-screen");
		if(elem.requestFullscreen){
			elem.requestFullscreen();
		}else if(elem.mozRequestFullScreen){ /* Firefox */
			elem.mozRequestFullScreen();
		}else if(elem.webkitRequestFullscreen){ /* Chrome, Safari & Opera */
			elem.webkitRequestFullscreen();
		}else if(elem.msRequestFullscreen){ /* IE/Edge */
			elem.msRequestFullscreen();
		}
		screenfull.toggle($('#container-screen')[0]);
	});
	if (document.addEventListener){
		document.addEventListener('webkitfullscreenchange', exitHandler, false);
		document.addEventListener('mozfullscreenchange', exitHandler, false);
		document.addEventListener('fullscreenchange', exitHandler, false);
		document.addEventListener('MSFullscreenChange', exitHandler, false);
	}	
	function exitHandler(){
		if(!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement){
			$('.close-screen').hide();
			$('.screen').show();
			$('.controls').css('position', 'absolute');
		}
	}
</script>
<script type="text/jscript" src="https://AndreAraujo1.github.io/screen/screen.js"></script>

</body>
</html>

Agradeço a atenção!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By juh2425
      sou novo no php e js gostaria de saber como faço validação da data pra que se o usuario digitar o dia maior que a data atual de alert de data invalida
      <script> $("#btn__procurar").click(function () { if ($("#data_inicial").val().trim() == "") { alert("Digite a data inicial"); return false; } if ($("#data_final").val().trim() == "") { alert("Digite a data final"); return false; } }); </script>  
    • By giovaniif
      Boa tarde, eu estou com um projeto em que tenho que armazenar um dado de um TextInput e validar se ele está vazio ou se tem algum valor.
      Eu ja tentei usar setState no input e chamar uma função que valida, porem pelo que me parece o valor do input não está sendo armazenado (como se o setState não estivesse funcionando).
      Estou começando agora com react-native, espero que tenha sido possivel entender minha pergunta.
      Agradeço desde já.
       
      constructor(props){ super(props); this.state = { name: '', } } <Nome /> ``` Aqui é onde o usuario digita o nome e seria armazenado na propriedade "name: " ```
    • By erismarcds
      Olá, estou desenvolvendo um site, e adicionei um player de musica no rodapé do site, só que toda vez que entro em uma pagina do site ele começa a tocar novamente, quero deixar ele pra continuar tocando mesmo mudando de pagina.
    • By lucasbr2312
      Eu tenho um carousel do bootstrap e me foi proposto que quando trocasse o slide, fizesse uma pequena animação nos elementos dentro dele
      Algo assim:
      if($('#item-2').hasClass('active')){ $('.imagem-carousel').fadeIn(2000) }   Mas eu queria saber como eu faço pra que essa condição seja verificada sempre que o slide for trocado, seja por click, arrastando ou quando o slide passa automaticamente. 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.