Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''fullscreen''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • 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

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 7 registros

  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. AndréAraujo

    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!
  3. AndréAraujo

    Sobrepor div a um <iframe> em modo fullscreen

    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. Geovani Oliveira

    Abrir página em fullscreen no evento (window.onload)

    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()'>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.