JavaScript - Sincronizar 2 vídeos (ingles y español)

 
Vista:
sin imagen de perfil

Sincronizar 2 vídeos (ingles y español)

Publicado por Javier (1 intervención) el 19/11/2014 22:03:45
En una página tengo dos vídeos embebidos y me gustaría que funcionasen de manera sincronizada para reproducir-detener, retroceder, y avanzar... si puede ser con el teclado, por ejemplo: al pulsar barra espaciadora, tecla izquierda y tecla derecha. (si no es con el teclado también me puede servir cualquier otra solución: por ejemplo con tres botones).

Dejo dos páginas como ejemplo (son dos reproductores de vídeo distintos), ahí se podrá entender mejor:
http://escuchoyaprendoingles.blogspot.com.es/
http://escuchoyaprendoingles.blogspot.com.es/p/deos-en-ingles.html


Básicamente hay un vídeo a la izquierda que el usuario lo puede dejar en inglés y desplegar el icono Hoja de transcripción "Toggle transcript viewer" (a la derecha del texto "amara") para ver el texto en inglés. Y también hay otro vídeo a la derecha en el que se puede seleccionar el idioma español y desplegar la traducción-texto al español (éste vídeo le dejaría en silencio. Escuchando uno es suficiente).

Son vídeos de amara.org muy interesantes pues hay bastantes en inglés que están traducidos. Además según avanza la locución se va destacando-resaltando la frase correspondiente en inglés y en español.

Lo que quería conseguir es que los dos vídeos (el de la derecha lo dejaría en silencio) puedan funcionar de manera sincronizada, es decir: como si pulsase los dos a la vez para reproducir, detener, para retroceder y para avanzar.


¿Es eso posible? Supongo que sería necesario algo de programación. Yo no tengo ni idea de html ni de programación. ¿Alguien sabe como se puede hacer? ¿Hay alguna otra solución que pudiera servir?.

Muchas gracias.
Un saludo.
Javier.


P.D.: El código que he usado para embeber los vídeos es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<script type="text/javascript" src='http://amara.org/embedder-iframe'></script>
</head>
 
<body>
<table width="100%"> <tr>
 
<td style="width:250px; background-color:yellow; text-align:top;">
 
Contenido de la primera columna
 
<div class="amara-embed" data-height="288px" data-width="512px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4">
</div>
</td>
 
<td style="width:250px; background-color:blue; text-align:top;">
 
Contenido de la segunda columna
 
<div class="amara-embed" data-height="288px" data-width="512px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4">
</div>
 
</td>
 
</tr> </table>
</body>
 
</html>



---
Aquí encontré algunas indicaciones para embeber el vídeo y para elegir entre varias opciones.
https://github.com/pculture/unisubs/wiki/Embed-Code-Usage-Guide
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder