MouseMove sobre iframe, div e div em modo fullscreen
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!Discussão (0)
Carregando comentários...