Incrustar videos php+js

oFF-sIDE

Hola gente, llevo ya un buen rato googleando y tengo un problema que no consigo arreglar.

Voy a intentar explicar mi problema lo más sencillo posible para no marearos.

Tengo 2 contenedores:
#lista_videos (Lista con los títulos de cada video, cada linea es un <li><a>Titulo</a></li>)
#video (vacío en principio, es donde meteré el código que da youtube u otra página para incrustar los videos, el típico embeed)

Desde php hago una consulta y con un bucle empiezo a escribir las lineas de este modo:

$resultado = mysql_query($consulta);

for($i = 0; $i < $num_resultados; $i++)
{
$fila = mysql_fetch_array($resultado);
$link = $fila['link'];
$titulo = utf8_encode($fila['titulo']);
echo '<li><a href="#" title="Reproducir Video" target="_top" onclick="incrustar_video('.$link.')">'.$titulo.'</a></li>';
}

En $link tengo almacenado todo el código html que se habrá de poner en el contenedor #video para que se incruste el video, es decir, el que te da youtube/vimeo/paginadevideosrandom

El código Javascript es el siguiente:

function MM_setTextOfLayer(objId,x,newText)
{
with (document) if (getElementById && ((obj=getElementById(objId))!=null))
with (obj) innerHTML = unescape(newText);
}

function incrustar_video(link)
{
return MM_setTextOfLayer('video_incrustado','','link');
}

El resultado al entrar en la página es este:

<li><a href="#" title="Reproducir Video" target="_top" onclick="incrustar_video(codigo embed de la página)>Radikalboard Vallnord, febrero 2009</a></li>

<li><a href="#" title="Reproducir Video" target="_top" onclick="incrustar_video(codigo embed de la página)">Valdelinares fuera pista</a></li>

Esto en lugar de dejarme el video invisible hasta que haga click, lo que hace es abrirme 2 contenedores con el video directamente en mitad de la página. En parte es lógico porque el código es interpretado aunque esté dentro de la etiqueta <a href...> pero en parte tampoco lo entiendo porque está dentro de los paréntesis del atributo "onclick"

¿Sabiendo lo que quiero podeis darme algún consejo sobre cómo solucionarlo?

Muchas gracias.

r2d2rigo

En vez de andar sobreescribiendo el innerHTML, podrias modificar el style.display entre block/none para mostrar u ocultar el contenedor.

erdanblo

¿Por qué usas un for para recorrer las filas de una tabla? o_O

Te presento tu nuevo amigo de programación avanzada, while y a tu amigo experto en cursores SQL, mysql_fetch_array.

Te podrás quejar eh!, luego me quieres hacer /ignore, para que veas que yo no soy rencoroso ;)

Por cierto, en cuanto al fallo, ¿has comprobado el código HTML que devuelve el servidor?, a ver si por casualidad esta cortado, y por eso aparece lo que aparece.

oFF-sIDE

#2 ¿Te refieres a esconder y mostrar el contenedor de videos? El problema es que aparecen los dos donde les da la gana. Si los oculto igualmente cuando los muestre no estarán donde toca :/

#3 Uso un for porque siempre uso for, porque me resultan más cómodos, sin más, creo que ya está bien con tus gracias. La instrucción mysql_fetch_array sí la he usado, es conforme he aprendido googleando y con un libro, no llevo más que 1 mes en ésto. Respecto al código fuente, aparece correctamente, es lo que he puesto en el thread, aparece en una sola linea y al copiar y pegarlo en el foro se ralla bastante y desaparecen cosas, por eso lo he quitado, pero vamos, el código fuente ha salido como esperaba. El problema es que lo ejecuta en el acto, esperaba que al estar dentro del atributo "onclick" no se ejecutase hasta que no hiciera click y ese click llamase a la función javascript :/

¿Teneis idea de algún otro modo de hacer esto mismo?

Si no encuentro la forma imagino que haré un contenedor con tamaño fijo y scroll, pondré todos los videos uno tras otro con su título y descripción y a la marcha, pero esta forma me parece bastante mejor y joder... para aprender hay que intentarlo.

#5 Nop, lo dejé bastante apalancado una vez llegué a consultas SQL, lo retomé hace 1 semana y poco.

erdanblo

"El problema es que lo ejecuta en el acto, esperaba que al estar dentro del atributo "onclick" no se ejecutase hasta que no hiciera click y ese click llamase a la función javascript :/"

Si te fijas en FEDA (en los post cargados de imagenes se nota bastante), la imagen se carga antes, aparece y luego se oculta (con el JS).

PD. Llevas dos meses y 5 días.

oFF-sIDE

Si, pero ahí cada imagen funciona con su propio contenedor. Yo lo que tengo aquí es un contenedor fijo. Lo que hice hace un tiempo cuando sólo sabía html básico fue esto mismo pero lo que cambiaba era el background-image del contenedor. Era una pequeña galería y cambiando tan sólo esa propiedad me servía, pero cuando me he puesto con código... como que no me sirve.

Creo que lo voy a dejar por imposible y lo haré en plan más cutre o me bajaré algún script ya hecho e intentaré adecuarlo a lo que yo quiero :/

Dod-Evers

Creo que hay una cosa que todavía no pillas bien:

PHP -> te genera la página en el servidor y te envía el HTML.
JS -> Se ejecuta en el explorador. En local.

oFF-sIDE

¿Quien dice que no lo pille?
Eso lo tengo claro, imagino que lo dices porque estoy metiendo un texto enorme dentro del parámetro de la función javascript. El caso es que esperaba que al ser un parámetro de una función no lo mostrase el navegador y esperase a que le diera al link. Sé que el navegador tan sólo verá un montón de texto, pero de esa misma forma se puede escribir texto en un contenedor cuando le das al link (lo usé para poner descripciones de fotos en mi primera web que era sólo html), la diferencia es que un texto normal no lleva etiquetas raras, pero tenía la esperanza de que funcionase :(

Dod-Evers

Has probado a no complicarte tanto y a al menos tener un par de ejemplos hechos con código a fuego?

Es decir, tener un <a href="#" onclick="cambiaElInnerHTMLdeObj()">prueba</a>

y en el js tener una función (notación de prototype)
cambiaelInnerHTMLdeObj(){
$('midiv').innerHTML = todoelcodigoembebidodeyoutube;
}

PD: el $ es lo de document.getElementById(...).
PD2: PUede ser que esté programando cosas en mi tiempo libre? OMG.

oFF-sIDE

El problema es que nunca he entrado de lleno en javascript, ahora me voy a dormir, pero mañana a primera hora lo probaré, gracias por tu interés, desde luego es un detalle eso de: programando en tu tiempo libre jejeje

Mañana seguiré con el thread, muchas gracias :)

PD: En cualquier caso eso no sería posible porque el texto de cada video lo tengo en la base de datos, quería evitar a toda costa hacer un texto para cada video, quería manejarlo todo desde la base de datos a base de php. Bona nit ^^

Dod-Evers

Buenos días,

Pero aun así sí que podrás coger el embed de yutube de un video random (uno de las zorras del youtube en videos y flash, por ejemplo).

#10 Antes de querer hacerlo todo de vez, aplica lo de divide y vencerás, haz el caso para 1 sólo y cuando lo tengas, le metes la base de datos o lo que te de la gana.

Y sabes que la evolución de esto es Ajax... xD

LOc0

Nas. ¿Y si tiras de un popup con el vídeo dentro?

En la base de datos podrías tener una tabla con el código a incrustar de cada página (youtube, googlevideo, etc...)

{nombre, codigo_fuente}

Por ejemplo youtube:

{'youtube', '<object type="application/x-shockwave-flash" style="width:425px;height:350px" data="http://www.youtube.com/v/xxxxxxxxxx"><param name="movie" value="http://www.youtube.com/v/xxxxxxxxxx" /></object>'}

Luego puedes tener otra tabla con los vídeos {id, nombre, tipo_codigo}

Ejemplo:

{pFRXAi10uQg, 'Golpes cómicos del Milagro de Ptinto', 'youtube'}

<a href="#" onclick="window.open('video.php?id=pFRXAi10uQg', 'Video pFRXAi10uQg', 'height=480,width=640');">Golpes cómicos del Milagro de Ptinto</a>

Al llamar a video.php te vas a la base de datos, buscas la ID del vídeo, ves que es de youtube, te vas a la tabla de código fuente, sacas el de youtube y con str_replace() CAMBIAS las xxxxxxxxxx por la ID del vídeo de youtube. (Esto se puede hacer con una sola consulta combinando tablas o con dos sin).

Si no te molestan los popups creo que es una solución buena, bonita y barata xD

Salu2 ;)

erdanblo

por ejemplo lista de videos:

enlace video1 -> videos.php?id=1
enlace video2 -> videos.php?id=2
enlace video3 -> videos.php?id=3

Y abajo, donde el contenedor de videos:

<?php

if(isset($_REQUEST['id])) {
 // Consulta
 Muesto el video de la ID
]else{
// no muestro nada
]
?>

(mi teclado no tiene para cerrar llave? xDDD)

oFF-sIDE

#11 sigo sin ver exactamente por donde vas, pero por lo poco que sé tienes mucha razón en que la evolución de esto es ajax, pero yo de ajax no tengo ni zorra a dia de hoy xD

#12 Francamente es algo que me estuve planteando anoche pero quería hacer algo que fuese más simple y ya estaba saturado así que lo dejé, de todos modos es una muy buena idea aunque algo enrevesada.

#13 Voy a probarlo porque la verdad es que es fácil y estoy seguro de que funcionará, aunque no me acabe de molar mucho el ir pasando parámetros por la url.

Muchas gracias a todos, cuando lo tenga os comento qué tal ha ido :)

oFF-sIDE

Bueno, ya está hecho como me había comentado #13, lo malo es que al cambiar de página php pega ese ligero pantallazo de carga, por eso lo quería hacer en javascript, pero vamos, que el resultado es cojonudo.

Muchas gracias a todos ^^

erdanblo

Bueno, yo he intentado hacerlo de otra manera, con DOM, porque he leido que innerHtml es de M$ y que es posible que se pierda el soporte en un futuro.

La verdad es que nunca habia tocado DOM, y bueno, no se si es exactamente lo que pides, pero creo que tira bastante bien. Seguramente tendrá unos fallos, pero tirar, tira xD que los experto lo corrijan:

http://www.soyunbug.es/video.php

Dod-Evers

#16 no jodas, que toda la página de carr... digo de una tienda online está hecha con innerHTML! xD

Pues nada, a cambiar a appendChild... xD

erdanblo

yo no tenia muy claro como usar innerHtml y lo primero que hice fue ponerlo en google:
http://www.google.es/search?source=ig&hl=es&rlz=&q=innerhtml&btnG=Buscar+con+Google&meta=lr%3D

Primer enlace: No uses innerHTML, usa DOM

NeB1

#1 pues a mí me parecía buena idea lo primero que has hecho intentando hacerlo rular con javascript, y me EXTRAÑA muxo que lo que metes dentro del "onclick" te lo interpréte el navegador, eso a mí nunca me ha pasado. Mira por si acaso estas dos cosas:

que cuando llamas a la función hagas esto -->onclick=" funcionmetervideo('codigodeempotradoyoutube'); "

con las comillas como tocan, y que el código de youtube no tenga comillas "'" sin escapar o algo así: <iframe src='www.youtube...'> que eso sí haría que te interpretara algo de código. Supongo que el tema está por ahí. (para "escapar" unas comillas tienes que hacer \" ó \')

RPV de lo que creo que te pasa
Para ver estos errores
Por último
oFF-sIDE

Vaya, me dais mogollón de ideas :)

El tema de la función, no se me ha quedado cortado el texto pero lo de las comillas sí es algo factible. Mañana lo haré de nuevo para ver si queda bien con los carácteres de escape porque no lo había ni pensado :)

#18 Conforme lo has hecho, echándole un ojo al código javascript, me he fijado que el código sería distinto si quiero incrustar un video de vimeo en vez de youtube, no?

EDIT: Ya lo he probado con la barra para hacer un escape antes de cada carácter especial y sigue sin funcionar, esta vez ni siquiera muestra el video de modo que lo dejaré conforme lo había hecho y tal vez más adelante me meta con DOM porque parece bastante interesante.
Muchas gracias a todos :)

NeB1

#20 pero si no te lo muestra no es que va mejor? quiero decir, antes te los mostraba sin que tu le mandases que te lo mostrase, ahora no te lo muestra, lo que quiere decir que no te está jodiendo la función, nu? nuse, nuse, haz como veas xD si pasas un link le pego una mirada q me aburro

Usuarios habituales

  • NeB1
  • oFF-sIDE
  • erdanblo
  • Dod-Evers
  • LOc0
  • r2d2rigo