Jump to content
juninhogpe

[Resolvido] Player em site

Recommended Posts

Bom dia.

Estou desenvolvendo um site para uma igreja, onde há a transmissão ao vivo da missa pelo player, gostaria da ajuda de vocês para saber como devo colocar o player no site para que quando eu mude de página o player continue tocando.

Seria frames?

Agradeço desde já pela ajuda e colaboração de todos.

Att.

Share this post


Link to post
Share on other sites

Olá Juninho. 

A única forma de fazer isso, é fazer a navegação do seu site não atualizar o navegador. Não é dificil, mas há um trabalho maior para desenvolver. 

Todos os sites que eu já vi, não se preocupam com isso. Ele atualizam tudo... e como a transmissão é ao vivo, o vídeo sempre estará atualizado. 

Eu utilizo o JWPlayer para fazer essas transmissões... é bem simples e leve.

https://www.jwplayer.com/

  • +1 2

Share this post


Link to post
Share on other sites

Você também pode abrir o player dentro de um frame, como o que você mesmo sugeriu, ou então a alternativa seria abrir um popup com o player, de forma que esse ficasse independente do site principal.

Share this post


Link to post
Share on other sites
Em 06/02/2017 at 18:05, André Manoel disse:

Olá Juninho. 

A única forma de fazer isso, é fazer a navegação do seu site não atualizar o navegador. Não é dificil, mas há um trabalho maior para desenvolver. 

Todos os sites que eu já vi, não se preocupam com isso. Ele atualizam tudo... e como a transmissão é ao vivo, o vídeo sempre estará atualizado. 

Eu utilizo o JWPlayer para fazer essas transmissões... é bem simples e leve.

https://www.jwplayer.com/

André, bom dia.

 

Muito obrigado pelo rápido retorno.

Essa atualização poderia ser feita via ajax correto?

 

Olhei o site do plugin e gostei muito, vou utilizá-lo.

 

Muito obrigado.

Abs.

Share this post


Link to post
Share on other sites
Em 06/02/2017 at 18:19, RodriAndreotti disse:

Você também pode abrir o player dentro de um frame, como o que você mesmo sugeriu, ou então a alternativa seria abrir um popup com o player, de forma que esse ficasse independente do site principal.

RodriAndreotti, bom dia.

 

Obrigado pelo retorno.

Eu criaria no caso 2 frames um para o player e outro para conteúdo correto?

 

Você acha que isso pode afetar ao abrir meu site em dispositivos móveis? Ou se eu usar no conteúdo altura e largura como 100% e definir no player largura do frama como 100% e altura em "em" resolve?

 

Muito obrigado.

Share this post


Link to post
Share on other sites
1 hora atrás, juninhogpe disse:

RodriAndreotti, bom dia.

 

Obrigado pelo retorno.

Eu criaria no caso 2 frames um para o player e outro para conteúdo correto?

 

Você acha que isso pode afetar ao abrir meu site em dispositivos móveis? Ou se eu usar no conteúdo altura e largura como 100% e definir no player largura do frama como 100% e altura em "em" resolve?

 

Muito obrigado.

Rapaz, vou ser sincero, acho que afetaria sim a navegação em dispositivos móveis, talvez a outra alternativa (abrir como um popup, seja a mais indicada caso não deseje utilizar ajax), no caso de precisar funcionar em dispositivos móveis também acho que seria melhor ajax.

 

Os frames foram criados em uma época onde a web estava engatinhando ainda, então eles não lidam muito bem com responsividade, a menos que você faça um uso extensivo de javascript para controlar estes tamanhos.

 

Porém, uma sugestão, em dispositivos móveis eu deixaria a abertura do player a escolha do usuário, pensando a franquia de banda do mesmo, pois se ele abrir o site no 3g/4g para ver alguma informação e começar a exibir a transmissão, vai consumir a banda dele.

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 Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
    • By joazinDev
      Estou tentando calcular duas horas e as vezes precisso que ela saia negativa tbm
      Exemplo:
      07:33 - 07:48 = -00:15
      Como faço isso utilizando php ?
    • By pheureunanda
      Olá, sou nova no fórum e na área de programação web, estou me dedicando a aprender tudo sozinha, só que há uma dúvida minha que eu quebro cabeça até hoje para resolvê-lá, mas até agora não consegui. É que eu quero saber como se centraliza e alinha as áreas de sidebar e post como nessas imagens que eu fiz de exemplo: 
      Como eu faço para deixa-las centralizadas e alinhadas uma do lado da outra com a distância que eu determinar? 
       
      E na primeira imagem de exemplo: como eu faço para deixar a área de sidebar dividida em blocos de tamanhos iguais um embaixo do outro? 
       
      Se alguém puder me ajudar... Estou recorrendo a esse fórum. 
    • By julianaparra
      Eu acho que posso estar errando no CSS, quando minimizo a pag as div cortam e a imagem de cima também, elas não ficam proporcionais.
      Esse é meu código, sei não esta responsivo, acho que tem mais div do que deveria, mas se tiro alguma ele buga. 
       
      Eu não consigo anexar as fotos para mostrar e o site ainda não esta no ar. http://julianaparra-dev.com/
       
      HTML
      <!DOCTYPE html> <html lang="pt-BR">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <link rel="stylesheet" href="./css/main.css">     <title>Juliana Parra</title> </head>   <body>     <header class="menu-principal">         <main>             <div class="header-1">                 <div class="logo">                     <a href="index.html">                         <img src="./img/logo.png" />                     </a>                 </div>                 <div class="links">                     <div class="menu">                         <nav>                             <ul>                                 <li><a href="index.html">Início</a></li>                                 <li><a href="sobre.html">Sobre</a></li>                                 <li><a href="portifolio.html">Portifolio</a></li>                                 <li><a href="contato.html">contato</a></li>                             </ul>                         </nav>                     </div>                     <ul class="redes-sociais">                         <li><a href="https://github.com/Parrajuliana" target="_blank"><img src="./img/github.png"                                     alt="Meu github"></a></li>                         <li><a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank"><img                                     src="./img/linkedin.png" alt="Meu linkedIn"></a></li>                     </ul>                 </div>             </div>         </main>     </header>     <div class="header-2">         <div class="imagem-fundo"></div>         <div class="container"></div>           <div class="imagem-miolo">             <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">         </div>     </div>     <div>         <div class="texto">             <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>                 Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,                 excepturi tempore nemo porro vel sequi ea quisquam velit sunt?                 Recusandae quidem aperiam tenetur.</p>             <div class="botao">                 <a class="bt bt-lj" href="sobre.html"><strong>saiba mais</strong></a>             </div>         </div>     </div>     <footer>         <div class="rodape">             <main>                 <div class="direitos-reservados">                     2019 Todos os Direitos Reservados                 </div>             </main>         </div>     </footer> </body>   </html>     //CSS   body {     font-family: 'Open Sans', sans-serif;        width: 100%;     height: 100%;     margin: 0 auto;        } .menu-principal {     background-color: #252323;     height: 68px;     width: 100%;             } main {     margin: 0 auto;     width: 980px;         position: relative; } .logo {     float: left;     padding: 10px;     width: 30%; } .links ul li {     margin-left: 20px;     display: inline-block;     float: left;     list-style: none; } .links{     padding: 10px;     width: 65%;     float: left; } .menu ul li a {     padding: 10px;     color: #8b8b8b;     text-decoration: none;     font-size: 16px;     text-transform: uppercase; } .menu ul li a:hover{     color: #00bac6; } .slick-initialized {     overflow: hidden; } .imagem-fundo {     background-image: url(/img/imagem_home.png);     width: 100%;       height: 400px;      background-repeat: no-repeat;        } .container {        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aa9b+8,2989d8+45,207cca+52,00ba3a+100 */ background: #00aa9b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #00aa9b 8%, #2989d8 45%, #207cca 52%, #00ba3a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa9b', endColorstr='#00ba3a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */     display: block;     width: 100%;       height: 30px; }   .imagem-bolinhas{     width: 1080px;     position: relative;       left: 250px;         top: 20px;              height: 300px;           background-repeat: no-repeat;       size: cover;   } .texto {     text-align: center;         width: 600px;     height: 300px;      font-size: 25px;       padding: 20px;        position:relative;     top:20%;     left:30%;      }   .bt {          text-decoration:none;            font-size: 15px;         color:white;         padding: 10px 20px;         background: -moz-linear-gradient(             top,             #0083ab 0%,             #00ba3b);         background: -webkit-gradient(             linear, left top, left bottom,             from(#0083ab),             to(#00ba3b));                 border-radius: 10px;         border: 1px solid;         -moz-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         -webkit-box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);         box-shadow:             0px 1px 3px rgba(0,0,0,0.5),             inset 0px 0px 0px rgba(255,255,255,0.7);     }   .rodape {     color: #c1c1c1;     background-color: #252323;     height: 60px;     width: 100%;       } .direitos-reservados {     padding: 20px;     width: 60%;     float: right;     }
    • By teuzero
      esse é o link do meu site:https://xraros.000webhostapp.com/
       
      o problema é que no arquivo css test.css no bloco de código:
      eu escrevi esse código:
       
      @media screen and (min-width: 800px) and (max-width: 848px){ .busca { width:200px; } .barra { background:url(../img/barra.png)no-repeat; } } escrevi esse código:
      .barra { background:url(../img/barra.png)no-repeat; }  
      no index da pagina tem a div:
      <div class="barra"> </div>  
      mais no site não carrega essa imagem.
      como eu carrego essa imagem via css dentro de um div?
×

Important Information

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