Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Multiples videos con html5

Estas en el tema de Multiples videos con html5 en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/03/2013, 13:25
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 1
Sonrisa Multiples videos con html5

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.
  #2 (permalink)  
Antiguo 29/03/2013, 19:51
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 9 años, 9 meses
Puntos: 131
Respuesta: Multiples videos con html5

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
  #3 (permalink)  
Antiguo 01/04/2013, 22:34
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 1
Respuesta: Multiples videos con html5

Gracias por responder..
Por ahí pueda conseguir algún plugin de wordpress que tenga las funciones que necesito
  #4 (permalink)  
Antiguo 01/04/2013, 22:58
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.994
Antigüedad: 11 años, 5 meses
Puntos: 2194
Respuesta: Multiples videos con html5

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.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 02/04/2013, 08:34
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 7 meses
Puntos: 1567
Respuesta: Multiples videos con html5

Pdés hacer algo asi

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>cambio de video source</title>
  5. </head>
  6.     <div>
  7. <video poster="ACDC.jpg"  id="videouno" preload="auto"  autoplay="autoplay" controls>
  8. <source src="intro.webm" type="video/webm" id="webm">
  9. </div>
  10.  
  11. <script type="text/javascript">
  12. //<![CDATA[
  13. var v = document.getElementById("videouno");
  14. var wbm = document.getElementById("webm");
  15. var t;
  16. function verifica_fin(){
  17. if (v.ended){// cuando finaliza....
  18. wbm.src ='ACDC.ogv'; // modifica el src
  19. v.load(); // carga
  20. v.play(); // y lo reproduce
  21. }
  22. }
  23. t = setInterval('verifica_fin()',1000);
  24. //]]>
  25. </body>
  26. </html>
Claro que para hacerla compatible, habria que analizar que navegador se usa y cambiar el src apropiado, yo puse solo uno

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 02/04/2013, 21:53
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 1
Respuesta: Multiples videos con html5

Cita:
Iniciado por emprear Ver Mensaje
Pdés hacer algo asi

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>cambio de video source</title>
  5. </head>
  6.     <div>
  7. <video poster="ACDC.jpg"  id="videouno" preload="auto"  autoplay="autoplay" controls>
  8. <source src="intro.webm" type="video/webm" id="webm">
  9. </div>
  10.  
  11. <script type="text/javascript">
  12. //<![CDATA[
  13. var v = document.getElementById("videouno");
  14. var wbm = document.getElementById("webm");
  15. var t;
  16. function verifica_fin(){
  17. if (v.ended){// cuando finaliza....
  18. wbm.src ='ACDC.ogv'; // modifica el src
  19. v.load(); // carga
  20. v.play(); // y lo reproduce
  21. }
  22. }
  23. t = setInterval('verifica_fin()',1000);
  24. //]]>
  25. </body>
  26. </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.
  #7 (permalink)  
Antiguo 02/04/2013, 22:12
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 7 meses
Puntos: 1567
Respuesta: Multiples videos con html5

Cita:
Iniciado por Faks Ver Mensaje
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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 07/04/2013, 12:18
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 1
Respuesta: Multiples videos con html5

Cita:
Iniciado por emprear Ver Mensaje
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!
  #9 (permalink)  
Antiguo 07/04/2013, 16:21
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 7 meses
Puntos: 1567
Respuesta: Multiples videos con html5

Cita:
Iniciado por Faks Ver Mensaje
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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 07/04/2013, 19:37
Avatar de Faks  
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 1
Respuesta: Multiples videos con html5

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
  #11 (permalink)  
Antiguo 07/04/2013, 19:54
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 7 meses
Puntos: 1567
Respuesta: Multiples videos con html5

Cita:
Iniciado por Faks Ver Mensaje
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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: html5, multiples, videos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:44.