[flash/java?] media player integrado no html (problema resolvido)

[marinheiro]

tenho uma situação um bocado chata...

estou a desenvolver um site com frames (impostas pelo cliente) e, numa das páginas, está uma galeria de videos, aos quais se acede clicando nos thumbnails respectivos... a maneira mais prática que encontrei foi mostrar os videos dentro de um iframe... funciona tudo bem excepto no opera que, por sinal, é o browser por eleição do cliente e o tipo anda a desatinar por causa disso...

então, qual é o problema? no opera, o filme é colocado na posição correcta mas a viewport é deslocada para baixo e para a direita exactamente a altura e a largura das frames de topo e lateral, respectivamente, deixando só ver o canto inferior direito do filme...

visto que sou um nabo em flash e em java/javascript, o que pretendia era que me indicassem uma maneira de poder resolver o problema, seja em flash ou java, porque estou farto de levar com o gajo e estou farto de procurar players em flash mas nenhum me deixa referenciar o flv/swf/avi através de um link sem fazer refresh à página...

se alguém quiser verificar a situação, o problema está em aikibudo.if-pt.com -> Técnicas -> Técnicas corporais

desde já agradeço todas as ideias e contribuições 👍

[djthyrax]

Dá margin negativo nessa div 👍 Se o User-agent for o Opera, fazes output do css com margin negativo, caso contrário não 😛

[marinheiro]

isso desloca-me o iframe e o viewport... fica na mesma com o problema...

[jreis]

Curiosamente, se abrir o frame (não o iframe do video, o frame todo completo) directamente, o video parece estar a mostrar bem. Talvez terás estilos CSS em conflito uns com os outros?

[djthyrax]

@marinheiro, aplica só a uma div do viewport ...

[marinheiro]

Curiosamente, se abrir o frame (não o iframe do video, o frame todo completo) directamente, o video parece estar a mostrar bem. Talvez terás estilos CSS em conflito uns com os outros?

foi exactamente assim que descobri que tinha a ver com as frames... já experimentei sem estilos nenhuns e dá-me o mesmo...

@marinheiro, aplica só a uma div do viewport ...

a questão é que a iframe tem só o tamanho do filme e o ficheiro chamado na iframe tem só o embed do player, não tem rigorosamente mais nada...

talvez estejamos a chamar viewport a coisas distintas... estou a chamar viewport à parte visivel do filme, que deveria coincidir com a posição do filme... já me avisaram que não é a maneira correcta, mas como é uma cena que nunca tive necessidade de fazer, não tenho conhecimentos absolutamente nenhuns de como fazer correctamente...

[djthyrax]

pk tás a usar iframe?

[jreis]

Pois, talvez com 1 javascript-zinho para alterar o src do embed (não sendo preciso usar iframes)? Sinceramente não sei se é possivel, tou só a especular, mas parece-me uma opcao viavel. Ou entao crias um div para la por o player, e usas qualquer coisa do genero

function loadVideo()
{
oMeuDiv.innerHTML = '<codigo HTML para chamar o player>';
}

Isto ta muito simplificado obviamente, mas qualquer coisa assim do genero era capaz de funcionar. Cria um efeito vagamente similar ao uso de um iframe.

[marinheiro]

pk tás a usar iframe?

pois... como eu disse anteriormente, não vejo um boi de javascript e como a intenção era ter os vários filmes disponiveis sem fazer refresh à página nem ter de ser via download, foi a unica solução que consegui que funcionasse...

Pois, talvez com 1 javascript-zinho para alterar o src do embed (não sendo preciso usar iframes)? Sinceramente não sei se é possivel, tou só a especular, mas parece-me uma opcao viavel. Ou entao crias um div para la por o player, e usas qualquer coisa do genero

function loadVideo()
{
oMeuDiv.innerHTML = '<codigo HTML para chamar o player>';
}

Isto ta muito simplificado obviamente, mas qualquer coisa assim do genero era capaz de funcionar. Cria um efeito vagamente similar ao uso de um iframe.

a ideia era exactamente essa... só que não a consegui implementar por falta de conhecimentos em javascript...

uma das coisas que experimentei foi ter o seguinte código na imagem em que era para clicar

<img src="video/pro_01_mukae_daoshi.jpg" width="100" height="81" border="0" 
onclick="javascript:  document.all['video_play1'].dynsrc='video/pro_01_mukae_daoshi.wmv';">

direccionado para outra imagem com o seguinte código:

<img id="video_play1" ALLOWTRANSPARENCY=TRUE src="video/pro_01_mukae_daoshi.jpg" 
scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" 
width="176" height="144">

mas também não funcionou...

[jreis]

Hmm ok.... Entao experimenta o seguinte:

function loadVideo(url)
{
document.getElemenbyId('divVideo').innerHTML = '<object type="video/x-ms-wmv" data="video/'+url+'" width="176" height="144" transparentatStart=true autostart=1 showcontrols=0 volume=-20>
  <param name="src" value="video/'+url+'" />
  <param name="autostart" value="true" />
  <param name="controller" value="false" />
  <param name="showcontrols" value="false" />
  <param name="transparentatStart" value="true" />
</object>';
}

Isto é um script que pões num ficheiro externo ou dentro do proprio ficheiro HTML, dentro das respectivas tags <script>. Nos thumbnails, colocas um link do género

<a href="javascript:loadVideo('caminho/do_ficheiro.wmv');">...</a>

ou então usando o evento onclick

 <img .... onclick="loadVideo('caminho/do_ficheiro.wmv');" />

Depois, em vez do iframe, nesse sitio pões um <div id="divVideo"></div>, incialmente vai estar em branco, mas depois de se clicar num thumb deve la aparecer o video.

Eu sinceramente nunca experimentei isto com <object>, mas suponho que deve funcionar bem. Ah, e também não experimentei este código, se der algum erro diz qualquer coisa.

Edit: Oops, tinha um errozinho nos 2 ultimos snippets. Ta corrigido.  ?

[marinheiro]

parece que ainda não foi desta... e o problema não estará no <object>, porque mudei para texto simples e ele não o mostrou...

reduzido ao minimo para o teste:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Federação Portuguesa de Aikibudo e Afiliadas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language = "javascript">
<!--
function loadVideo(url)
{
document.getElemenbyId('divVideo').innerHTML = '<object type="video/x-ms-wmv" data="video/'+url+'" width="176" height="144" transparentatStart=true autostart=1 showcontrols=0 volume=-20>
<param name="src" value="video/'+url+'" />
<param name="autostart" value="true" />
<param name="controller" value="false" />
<param name="showcontrols" value="false" />
<param name="transparentatStart" value="true" />
</object>';
}
//-->
</script>
</head>

<body>
<div align="center">
<div align="center"><a href="javascript:loadVideo('pro_01_mukae_daoshi.wmv');"><img src="video/pro_01_mukae_daoshi.jpg" width="100" height="81" border="0"><br />Mukae Daoshi</a>
</div>
<!-- <div align="center"><a href="pro_01_mukae_daoshi.htm" target="video_play1"><img src="video/pro_01_mukae_daoshi.jpg" width="100" height="81" border="0"></a><br />Mukae Daoshi</div> -->
<div id="divVideo" style="width:200px; height:200px; background-color:#FFFF00"></div>
</div>
</body>
</html>

só coloquei o <style> na divVideo para visualizar onde ela está 😞

[jreis]

Ok, tive a rever, e ha mais 2 pekenos erros na funcao:

no inicio da funcão, tem de ser "document.getElementById" em vez de "document.getElemenbyId"  ?

e aquela parte a seguir ao innerHTML = '...'; tem de estar tudo numa só linha.

{
document.getElementById('divVideo').innerHTML = '<object type="video/x-ms-wmv" data="video/'+url+'" width="176" height="144" transparentatStart=true autostart=1 showcontrols=0 volume=-20><param name="src" value="video/'+url+'" /><param name="autostart" value="true" /><param name="controller" value="false" /><param name="showcontrols" value="false" /><param name="transparentatStart" value="true" /></object>';
}

Penso que assim já deve funcar, se bem que não experimentei com o <object>, mas a partida não vejo razão para não dar. Pelo menos já não da erro!

[marinheiro]

:notworthy:

excelente!!! já funcemina!!! 😞

[jreis]

Fixe!😞

[marinheiro]

neste momento, és o meu heroi 😞