Ir para conteúdo
Potty_NH

Fullscreen em JS

Recommended Posts

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) 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por PeeWee
      Estou há horas com um problema no meu código, tenho a pagina Auth.php onde há algumas function que funcionam normalmente, porém a seguinte apresenta problemas.
      function getMemberNivel($nivel) {
              $db_handle = new DBController();
              $query = "Select * from members where nivel = ?";
              $result = $db_handle->runQuery($query, 's', array($nivel));
              return $result;
          }
       
      Na Index.php faço a chamada dela da seguinte forma:
       
      $teste = $auth->getMemberByUsername($nivel);
       
      Ocorre que preciso utilizar a variavel $teste, só que exibe erro como se a variavel nao existisse. As demais variaveis vindas da pagina funcionam normalmente. 
      Espero que algum dos colegas possa me ajudar. 
    • Por camargo.2018
      Tou com um erro no meu script e não sei identificar erra pra ele exibir a imagem do usuário mas isso não está acontecendo
       
      Error:

       
      funcao.php:
      function ver_avatar($nick){ include 'str_get_html.php'; $url = "http://pt.clubcooee.com/users/view/".$nick; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 15); curl_setopt($ch, CURLOPT_TIMEOUT, 15); $return = curl_exec($ch); curl_close($ch); $html = str_get_html($return); $res = $html->find('.m33 img'); $imgLink = $res[0]->attr['src']; return $imgLink; } str_get_html.php:
      <?php function str_get_html($str, $lowercase=true, $forceTagsClosed=true, $target_charset = DEFAULT_TARGET_CHARSET, $stripRN=true, $defaultBRText=DEFAULT_BR_TEXT, $defaultSpanText=DEFAULT_SPAN_TEXT) { $dom = new simple_html_dom(null, $lowercase, $forceTagsClosed, $target_charset, $stripRN, $defaultBRText, $defaultSpanText); if (empty($str) || strlen($str) > MAX_FILE_SIZE) { $dom->clear(); return false; } $dom->load($str, $lowercase, $stripRN); return $dom; } ?> menu.php:
      <div class="usr-nav"> <img src="<?php $veavt = ver_avatar($usr); echo $veavt; ?>" class="img-usr"> <p class="name-usr">Nome do Usuário</p> </div>  
      Me Ajudem mas rápido possível pfvrrrr
    • Por camargo.2018
      Não faz upload de jeito nenhum esse e o código que tentei (Pfvr me ajuda :D):
       
      Html:
      <div class="conteudo">     <form enctype="multipart/form-data" action="?pag=upload-programetes" method="POST">     <input type="hidden" name="MAX_FILE_SIZE" value="999999999999999" />     Enviar novos Programetes: <input name="userfile" type="file" />     <input type="submit" value="Enviar arquivo" /> </form></div> Php:
      if($_GET['pag'] == "upload-programetes"){ $upload = upload_programetes($_FILES); echo $upload; } função:
      function upload_programetes($up){ $uploaddir = $_SERVER["DOCUMENT_ROOT"].'/programetes/'; $uploadfile = $uploaddir . basename($up['userfile']['name']); if (move_uploaded_file($up['userfile']['tmp_name'], $uploadfile)) {     return "Arquivo válido e enviado com sucesso.\n"; } else {     return "Possível ataque de upload de arquivo!\n"; } }  
    • Por fernando britto
      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>   
    • Por guilherme.audi
      Olá, pessoal,
      Sou meio-leigo e logo mais serei vesgo... não entendi onde está o problema:
       
      Tenho uma situação de submenu bem simples, que deve mostrar (display="table") e esconder (display="none") algumas divs, conforme a seleção do usuário.
      No início da página antes do <head> criei a seguinte estrutura:
       
      <!-- CONTROLE DE ABAS :: MENU DETALHES -->
      <script>
          function SelecCarac() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "table";
              dimensoes.style.display = "none";
              projeto3d.style.display = "none";
              videotutorial.style.display = "none";
              esquemafios.style.display = "none";
          }
          function SelecDimensoes() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "table";
              projeto3d.style.display = "none";
              videotutorial.style.display = "none";
              esquemafios.style.display = "none";
          }
          function Selec3D() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "none";
              projeto3d.style.display = "table";
              videotutorial.style.display = "none";
              esquemafios.style.display = "none";
          }
          function SelecVideo() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "none";
              projeto3d.style.display = "none";
              videotutorial.style.display = "table";
              esquemafios.style.display = "none";
          }
          function SelecEsquemaFios() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "none";
              projeto3d.style.display = "none";
              videotutorial.style.display = "none";
              esquemafios.style.display = "table";
          }
      </script>
      (ridiculamente extenso, até suponho que haja um caminho menor..)
       
      As abas desse "submenu" estão no corpo da página (asp clássico) assim:

      <!-- ABAS :: MENU DE DETALHES DO PRODUTO -->
      <div class="container-principal" style="text-align: center;">
          <% if Len(VetProd(97,0)) > 5 Then %>
              <div class="detalhe-menu-abas" id="bt_carac" onclick="SelecCarac()" >Características</div>
          <%End if
          if Len(VetProd(11,0)) > 0 Then %>
              <div class="detalhe-menu-abas" id="bt_dimensoes" onclick="SelecDimensoes()">Dimensões</div>
          <%End if
          if Len(VetProd(92,0)) > 1 Then %>
              <div class="detalhe-menu-abas" id="bt_3d" onclick="Selec3D()">Desenho 3D</div>
          <%End if
          if Len(VetProd(135,0)) > 3 Then %>
              <div class="detalhe-menu-abas" id="bt_video" onclick="SelecVideo()">Video tutorial</div>
          <%End if
          if Len(VetProd(22,0)) > 0 Then %>
              <div class="detalhe-menu-abas" id="bt_esquemafios" onclick="SelecEsquemaFios()">Ligação dos fios</div>
          <%End if%>
      </div>
      <!-- -->
       
      ..E essas id chamadas "div_carac", "div_dimensoes", "div_3d", "div_video" e "div_esquemafios" estão assim:
       
      <!-- DIMENSÕES -->
      <div class="container-principal" style="text-align: center; display: none;" id="div_dimensoes">
          <h3 style="text-align: left;">Dimens&otilde;es<span class="letramed2">&nbsp;(mm)</span></h3>
          <a href="admin/imgs/icones/<%= VetProd(11,0) %>" target="_blank"><img src="admin/imgs/icones/<%= VetProd(11,0) %>" alt="Dimens&otilde;es de <%= VetProd(1,0) %> em mm" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" class="detalhe-dimensoes"/></a>
      </div>
      <!-- -->
       
      <!-- CARACTERÍSTICAS ESPECIAIS -->
      <div class="container-principal" id="div_carac">
          <h3>Caracter&iacute;sticas especiais</h3>
          <%= VetProd(97,0)%>
      </div>
      <!-- -->
          
      <!-- VÍDEO INCORPORADO  -->
      <div style="background-color: #000000; width: 100%; display: none;" id="div_video">
          <div class="container-principal" style="background-color: black; text-align: center; padding: 1% 0;">
              <iframe class="detalhe-video" src="<%= VetProd(135,0) %>" frameborder="0" allowfullscreen></iframe><br />
              <a href="https://www.youtube.com/user/weightechbrasil/search?query=<%=VetProd(1,0)%>" style="color:#FFFFFF;" title="Veja mais em Youtube/WeightechBrasil" target="_blank" class="submenu"><img src="http://www.weightech.com.br/imgs/site/Logo_Youtube_color_horizontal.png" height="30" title="Canal WeightechBrasil no Youtube" alt="Youtube.com/WeightechBrasil" style="margin-bottom:5px;"/><br>Youtube.com/WeightechBrasil</a>
          </div>
      </div>
      <!-- -->
       
      <!-- PROJETO 3D -->
      <% if Len(VetProd(92,0)) > 1 Then %>
          <div class="container-principal" style="text-align: center; margin-top: 20px; display: none;" id="div_3d">
              <iframe style="width: 100%; height: 680px;" src="<%=VetProd(92,0)%>" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe>
          </div>
      <%End if%>
      <!-- -->
       
      <!-- ESQUEMA DE LIGAÇÃO -->
      <div class="container-principal" style="display: none;" id="div_esquemafios">
          <h3>Esquema de liga&ccedil;&atilde;o dos fios</h3>
          <img src="admin/imgs/icones/<%= VetProd(22,0) %>" alt="Esquema de liga&ccedil;&atilde;o" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" style="width:90%; max-width:400px;"/>
      </div>
      <!-- -->
       
      Tudo funciona, exceto o VÍDEO INCORPORADO (id="div_video").
      Por quê?!
       
      Obrigado!
×

Informação importante

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