[SOLUCIONADO] Multiples videos con html5

Faks · #1 (**permalink**) 29/03/2013, 12:25

Buenas!
Tengo una pequeña duda que no puedo resolver, estuve buscando mucho sin encontrar aparentemente lo que necesito y bueno, decidí postear a ver que pasaba.

Lo que estoy intentando hacer, es reproducir dos videos con la etiqueta html5, pero sin tener ninguna miniatura de los videos o cualquier cosa similar. Con esto lo que quiero hacer es que: primero el reproductor me reproduzca un video de 15 segundos - vendría a ser la intro - y luego pase automáticamente a el video en cuestión. Asi, si por algun motivo quiero cambiar la intro de los videos, edito ese único video y listo.

Espero que se entienda la idea, siento que puse la palabra video unas 20 veces.
En fin, gracias.

hackjose · #2 (**permalink**) 29/03/2013, 18:51

Si se te entiende.

Personalmente pienso que estos elementos(audio,video) están destinados para tener solo un video o audio ya que los elementos sources proporcionan el mismo archivo pero en los diferentes formatos

Como dije solo es una opinion

La documentacion de HTML5 dice que cualquier modificación dinamica sobre los elementos source una vez que el documento esta listo no tendran efecto, si se desea modificar el recurso a reproducir se debe modificar el atributo src de estos elementos.

Asi que para pasar de un video a otro debes usar el atributo src de audio/video y no los elementos source

Talvez tengas que usar onload despues un settimeout con el tiempo del primer video y asi pasar al siguiente video

salu2

Faks · #3 (**permalink**) 01/04/2013, 21:34

Gracias por responder..
Por ahí pueda conseguir algún plugin de wordpress que tenga las funciones que necesito

Triby · #4 (**permalink**) 01/04/2013, 21:58

Tal vez te sirva algo como esto: http://stackoverflow.com/questions/2...audio-playlist

Es con sólo un src, pero es un buen punto de partida.

emprear · #5 (**permalink**) 02/04/2013, 07:34

Pdés hacer algo asi

Código HTML:

Ver original<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
<head>
<meta charset="utf-8" />
<title>cambio de video source</title>
</head>
<body>
    <div>
<video poster="ACDC.jpg"  id="videouno" preload="auto"  autoplay="autoplay" controls>
<source src="intro.webm" type="video/webm" id="webm">
</video>
</div>
 
<script type="text/javascript">
//<![CDATA[
var v = document.getElementById("videouno");
var wbm = document.getElementById("webm");
var t;
function verifica_fin(){
if (v.ended){// cuando finaliza....
wbm.src ='ACDC.ogv'; // modifica el src
v.load(); // carga
v.play(); // y lo reproduce
}
}
t = setInterval('verifica_fin()',1000);
//]]>
</script>
</body>
</html>

Claro que para hacerla compatible, habria que analizar que navegador se usa y cambiar el src apropiado, yo puse solo uno

SAludos

Faks · #6 (**permalink**) 02/04/2013, 20:53

Cita:

Iniciado por emprear

Pdés hacer algo asi

Código HTML:

Ver original<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
<head>
<meta charset="utf-8" />
<title>cambio de video source</title>
</head>
<body>
    <div>
<video poster="ACDC.jpg"  id="videouno" preload="auto"  autoplay="autoplay" controls>
<source src="intro.webm" type="video/webm" id="webm">
</video>
</div>
 
<script type="text/javascript">
//<![CDATA[
var v = document.getElementById("videouno");
var wbm = document.getElementById("webm");
var t;
function verifica_fin(){
if (v.ended){// cuando finaliza....
wbm.src ='ACDC.ogv'; // modifica el src
v.load(); // carga
v.play(); // y lo reproduce
}
}
t = setInterval('verifica_fin()',1000);
//]]>
</script>
</body>
</html>

Claro que para hacerla compatible, habria que analizar que navegador se usa y cambiar el src apropiado, yo puse solo uno

SAludos

Genial, funciona perfecto.. por el momento estoy usando solo formato mp4, pero el dia que suba otro tipo de archivos supongo que utilizando el "if" para comparar navegadores y tire diferentes códigos.

emprear · #7 (**permalink**) 02/04/2013, 21:12

Cita:

Iniciado por Faks

Genial, funciona perfecto.. por el momento estoy usando solo formato mp4, pero el dia que suba otro tipo de archivos supongo que utilizando el "if" para comparar navegadores y tire diferentes códigos.

Mirá no lo probé, pero supongo que si ponés todos los formatos y cambias todos los src va a funcionar igual, de todas maneras en cada navegador va a reproducir el que le corresponda

Código:

<source src="intro.webm" type="video/webm" id="webm">
<source src="intro.mp4" type="video/mp4" id="mp4">
<source src="intro.ogv" type="video/ogv" id="ogv">

en el js, le agregás las variables para que identifique cada source por su id, y despues

Código:

wbm.src ='ACDC.webm'; // modifica el src
ogv.src ='ACDC.ogv'; // modifica el src
mp4.src ='ACDC.mp4'; // modifica el src

Supuestamente cuando termine el intro, va a cambiar los tres
Saludos

Faks · #8 (**permalink**) 07/04/2013, 11:18

Cita:

Iniciado por emprear

Mirá no lo probé, pero supongo que si ponés todos los formatos y cambias todos los src va a funcionar igual, de todas maneras en cada navegador va a reproducir el que le corresponda

Código:

<source src="intro.webm" type="video/webm" id="webm">
<source src="intro.mp4" type="video/mp4" id="mp4">
<source src="intro.ogv" type="video/ogv" id="ogv">

en el js, le agregás las variables para que identifique cada source por su id, y despues

Código:

wbm.src ='ACDC.webm'; // modifica el src
ogv.src ='ACDC.ogv'; // modifica el src
mp4.src ='ACDC.mp4'; // modifica el src

Supuestamente cuando termine el intro, va a cambiar los tres
Saludos

Estuve probando y parece que funciona bien, aunque tengo problemas para reproducir con firefox.. pero no se si tendrá que ver con el código.
Gracias!

emprear · #9 (**permalink**) 07/04/2013, 15:21

Cita:

Iniciado por Faks

Estuve probando y parece que funciona bien, aunque tengo problemas para reproducir con firefox.. pero no se si tendrá que ver con el código.
Gracias!

habría que ver la url

Saludos

Faks · #10 (**permalink**) 07/04/2013, 18:37

Acabo de notar que en esta linea

wbm.src ='ACDC.webm'; // modifica el src

En vez de "wbm.src" puse "webm.src"
Mañana lo arreglo y veo

emprear · #11 (**permalink**) 07/04/2013, 18:54

Cita:

Iniciado por Faks

Acabo de notar que en esta linea

wbm.src ='ACDC.webm'; // modifica el src

En vez de "wbm.src" puse "webm.src"
Mañana lo arreglo y veo

bueno, el webm tampoco es imprescindible, con ogv y mp4 te alcanzaría

Saludos