Jump to content

Search the Community

Showing results for tags 'fullscreen'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 7 results

  1. fernando britto

    Como adicionar botão Fullscreen

    Tenho esse código html porém preciso acrescentar mais um botão com a função Fullscreen nele, más não sei como da os comandos lá em baixo. Eu segui a mesma sequencia dos outros porém não sei como da os comandos para que ele abra em tela cheia. <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeGrande()">Grande</button> <button onclick="makePequeno()">Pequeno</button> <button onclick="makeNormal()">Normal</button> <button onclick="makeFullscreen ()">Fullscreen</button> <br><br> <video id="video1" width="420"> <source src="" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeGrande() { myVideo.width = 660; } function makePequeno() { myVideo.width = 220; } function makeNormal() { myVideo.width = 420; } </script>
  2. 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!
  3. Um exemplo, no Google Chrome o "z-index:2147483647" consegue fazer a div se sobrepor ao iframe sem problemas, já nos outros navegadores não estou conseguindo fazer <div id"controls"> se sobrepor ao iframe, alguém conhece alguma forma de sobrepor o iframe ou tem alguma ideia do que eu estou fazendo de errado? Segue o exemplo: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Teste</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> #contarner_video{ padding-bottom:56.25%; height:0; border-radius:inherit; overflow:hidden; z-index:0; } #contarner_video iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; } #ytplayer{ display:block; } #controls{ width:100%; height:30px; background-color:#000; opacity:0.9; position:absolute; top:0; left:0; z-index:2147483647; } #controls span{ line-height:30px; padding:0 20px; color:#fff; float:right; } </style> </head> <body> <div id="contarner_video"> <iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/M7lc1UVf-VE?controls=0&enablejsapi=1&fs=0&rel=0&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe> <div id="controls"> <span>FullScreen</span> </div> </div> <script> $('#controls span').on('click', function(){ var e = document.getElementById("ytplayer"); if (e.requestFullscreen) { e.requestFullscreen(); } else if (e.mozRequestFullScreen) { e.mozRequestFullScreen(); } else if (e.webkitRequestFullscreen) { e.webkitRequestFullscreen(); } else if (e.msRequestFullscreen) { e.msRequestFullscreen(); } }); </script> </body> </html>
  4. Olá amigos, boa tarde! Gostaria de abrir uma página em fullscreen no evento window.onload. Eu tenho um botão na tela que coloca a página em tela cheia mas eu gostaria de fazer esse evento de forma automática. Isso seria possível? Segue o meu código abaixo: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Tela cheia</title> <!-- Função que faz a página ficar em tela cheia--> <script type="text/javascript"> addEventListener("click", function() { var el = document.documentElement , rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen ; rfs.call(el); }); </script> <script type="text/javascript"> function start() { //Alguma coisa nessa linha funcionaria? //document.getElementById('bt').click; alert('Gostaria de abrir a página em fullscree ao inicializar!'); }window.onload=start; </script> </head> <body> <input type="button" id= "bt" value="Teste" onclick="popUpWindow()"> </body> </html>
  5. Potty_NH

    Fullscreen em JS

    Eu estou criando um player , mas estou tendo problemas com o fullscreen, pois seu eu deixo o video com widht e height de 100% ele bagunça com o meu css e o jeito que eu tinha achado para da uma ameniza da nisso foi colocar um padding no css mas o player fica flutuando na tela. Aqui está um trecho do código full = playerVideo.querySelector('.full'); full.addEventListener('click', fullScreen); view.addEventListener('click', play); function fullScreen(){ if(!document.webkitFullscreenElement){ playerVideo.webkitRequestFullscreen(); }else{ document.webkitExitFullscreen(); } } Eu queria saber se tem um jeito de abrir o fullscreen do player sem bagunçar meu css , se o problema for no css me desculpe por postar no lugar errado (estou começando agora :v)
  6. Tudo certo amigos? Seguinte, sou designer e tenho um leve conhecimento de HTML, trabalhei com isso em meados de 2007. Obviamente muita coisa mudou desde lá e eu não acompanhei. Aí soltaram uma bomba pra mim aqui no trampo, montei um layout e como não tinha ninguém pra fazer o Front-End caiu no meu colo. Minha situação é; eu queria rodar um vídeo da mesma maneira que acontece nesse site: https://www.allbirds.com(a parte que falo é onde tem uma imagem de um cara num campo) Testei várias coisas, vi que precisa de JS mas até agora não consegui fazer funcionar dessa maneira. Alguém poderia me ajudar nessa? Ainda não consegui entender toda a nova maneira de rodar vídeos no html. Valeu!
  7. mhweb

    Tela Cheia x Reload()

    Pessoal, Preciso que o site fique em Tela cheia e a cada cada 10 segundos de um reload para atualizar os dados da página, para isso inserir os scripts abaixo, porém quando a página esta em Tela cheia após os 10 segundos ela volta ao modo normal, como faço para manter a página em Tela cheia e fazendo reload? <!-- Atualiza a Página --> <script type='text/javascript'> var tempo = 10; function contador() { if(tempo > 0) { document.getElementById('txt').innerText = ' ' + tempo + ' '; setTimeout('contador()', 1000); tempo = tempo - 1; } else { window.location.refresh() } } </script> <!-- Contador --> <body onload='contador()'> <!-- Tela Cheia --> <script type='text/javascript'> addEventListener ( 'click', function() { var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen; rfs.call(el); } ); </script> <input type='button' value='Tela cheia' onclick='popUpWindow()'>
×

Important Information

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