none
Video como plano de fundo

    Question

  •  

    Bom dia pessoal,

     

    Já tentei, de diversas formas, colocar um vídeo como plano de fundo de uma página. Na verdade, ele nem precisa ficar como plano de fundo. Preciso colocar uma DIV por cima do vídeo... Alguém sabe como fazer?

     

    Fico no aguardo,

    Wednesday, August 06, 2008 1:21 PM

All replies

  • Ola Eder,Tente user a propriedade position de css

    algo assim

    <object [...dados do video...]></object>
    <div style="position: relative; top: -20px; left: 5px>Conteudo do div</div>



    Wednesday, August 06, 2008 6:12 PM
  • Boa noite Raphael,

     

    Até agora foi o que mais se aproximou do que eu preciso, mas infelizmente não deu certo. A DIV (e todo seu conteúdo) fica por cima do vídeo enquanto ele está parado, mas, assim que começa a execução, ele encobre a DIV.

     

    Como resolvo isso?

     

    Wednesday, August 06, 2008 11:17 PM
  • tenta usar a propriedade zindex

    para saber mais veja esse tutorial
    http://www.pt-br.html.net/tutorials/css/lesson15.asp

    coloca o zindex do video menor do que o do div
    Wednesday, August 06, 2008 11:41 PM
  • Raphael,

     

    Muito interessante, mas não funcionou... olha como eu coloquei:

    Code Snippet

    <p>
    <object id="media1"  style="z-index:2" height="200" type="video/x-ms-wmv" width="200">
     <param name="filename" value="teste.wmv">
     <param name="uiMode" value="invisible">
     <param name="fullScreen" value="-1">
     <param name="stretchToFit" value="-1">
    </object>
    </p>


     

    <div align="right" style=" position:relative; z-index:1; bottom:500px; width:29px; height:100%; top: -565px;  right:-57px">

     

     

     

    Estou fazendo algo errado?

    Thursday, August 07, 2008 12:20 AM
  • Eder

    Eu tb tentei aqui, e realmente ele video sobrepoe o div apos o play
    Tambêm tentei fazer outros teste e não deram certos!


    Desculpe, por nao ajudar o bastante

    acredito que você vai ter que procurar outra solução!


    Thursday, August 07, 2008 12:36 PM
  • Cara, qual é o formato do video e o controle ActiveX que tu tá usando para rodar esse video?
    MediaPlayer, QuickTime ou Flash?

     

    Tuesday, August 12, 2008 4:51 AM
  • Bom dia Leandro,

     

    Estou usando formato WMV e MediaPlayer.

     

    Fico no aguardo,

     

    Tuesday, August 12, 2008 10:27 AM
  • Nesse caso eu acredito que seja impossível, talvez sua única chance de sucesso seja converter o vídeo para flv e exibi-lo pelo ploguin do flash.

     

    Tuesday, August 12, 2008 2:54 PM
  • IE 6?

    Tente fazer o seguinte:

    Coloque seu vídeo na página, dentro de um DIV, com position absolute.
    Faça um IFRAME com position absolute também, z-index = +1 relativo ao DIV do vídeo e coloque-o em cima do vídeo
    Faça outro DIV com position absolute também, z-index = +1 relativo ao IFRAME e coloque-o em cima do IFrame.

    Em outras palavras:
    Objetos (e isso inclui combos e listas) no IE 6 SEMPRE tem o máximo Z-index possível e nunca poderão ser encobertos, exceto se usar o workaround explicado acima...

    Mas... pensando bem... Não seria muito mais fácil inserir o vídeo dentro de um DIV e dar um style="display:none" no <OBJECT>? Assim só o DIV seria visível O.o
    Tuesday, August 12, 2008 4:35 PM
  •  TI - Eder Pardeiro wrote:

     

    Bom dia pessoal,

     

    Já tentei, de diversas formas, colocar um vídeo como plano de fundo de uma página. Na verdade, ele nem precisa ficar como plano de fundo. Preciso colocar uma DIV por cima do vídeo... Alguém sabe como fazer?

     

    Fico no aguardo,



    Boa Noite,

    Você tem certeza que é simplesmente um vídeo com uma div por cima ou um vídeo como plano de fundo? Acredito que tenha alguma outra tecnologia envolvida seja flash ou silverlight.

    Porque terá que ser um vídeo muito curto para dar tempo de carregar o vídeo antes do usuário clicar em um link ou sair da página ou algo assim.

    Como é esse efeito que você deseja fazer? Tem algum exemplo?


    Abraço!
    Tuesday, August 12, 2008 11:31 PM
  • Boa tarde Roberto, boa tarde pessoal...

     

    Há tempos desenvolvi aqui na empresa uma página em ASP que fica no server e faz parte do portal interno aqui.

    Coloquei esta página como papel de parede nas estações. Nela criei uma DIV que fica do lado direito e o usuário tem algumas ferramentas nela, pode ver os aniversariantes do mês, consultar a agênda telefônica, ver comunicados do portal, e assim por diante. Hoje funciona perfeitamente

    Consegui colocar nessa DIV, transparência de 60% e então fica com um efeito semelhante à barra lateral do Windows Vista. Nessa página, o usuário pode alterar o plano de fundo e o efeito da transparencia da DIV continua sobre qualquer imagem.

    Agora quero colocar um vídeo no lugar do plano de fundo, como o Dream Scene do Windows Vista, ou que seja, o video tem que ficar por tras da DIV, mas ele não fica nem a pau...

     

    Dei um print da minha tela para que vocês possam ver como ficou (com plano de fundo estático JPG):

     

    Exemplo1

     

    Exemplo2

     

    Exemplo3

     

    Continuo no aguardo,

    Tuesday, August 26, 2008 5:19 PM
  • Vídeos são elementos topmost no IE, como combos e flash (pelo menos no IE 6), logo, o vídeo sempre ficará acima de tudo no IE 6.

    Tem uma POG (Programação Orientada a Gambiarras) para contornar isso: coloque um IFRAME transparente sobre o vídeo e sobre o IFRAME coloque seu DIV.

    Só que há um detalhe importante:

    Vídeo geralmente não é renderizado pelo Windows, e sim pela placa de vídeo, ou seja, não há vídeo lógico na maioria das vezes, o que há é um quadrado preto (na verdade vermelho bem escuro) que indica para o vídeo onde ele será renderizado.

    Este tipo de amostragem de vídeo é chamado de Overlay e é o tipo mais comum para máquinas não-Vista.

    Você pode verificar se é um overlay de duas formas:

    1) Tire um print-screen do vídeo e cole no photoshop ou paint. Virá um quadrado vermelho somente.
    2) Desenhe no photoshop ou paint qualquer coisa usando esta mesma tonalidade de vermelho e o vídeo "tocará" onde você desenhar.

    Logo, sob estas circustâncias, não é possível adicionar camadas transparentes sobre o vídeo (pelo menos não em HTML).

    Veja se consegue tirar printscreen do vídeo.

    EDIT: BTW, sua melhor alternativa aí é SilverLight 2.0.
    Tuesday, August 26, 2008 5:52 PM
  • Olá!

    Vi seu post e gostei do desafio...
    após alguns testes eu consegui colocar uma div em uma layer sobre o video wmv da seguinte forma:

      <PARAM NAME="windowlessVideo" VALUE="1">

    dentro do:

    <OBJECT id=player  classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6>

    Este classid chama uma classe do windows mediaplayer que permite esta interação de windowlessVideo

    eu usei para colocar uma logo em flash animado sobre o video wmv. 

    Confere lá:

    www.studioprinter.com.br

    Observei que funciona apenas no internet explorer, no firefox não funcionou!

    Espero ter ajudado...
    Thursday, December 11, 2008 1:40 AM