Controlar un vídeo con un botón de un video_controls_bar

javier_u · #1 (**permalink**) 22/11/2014, 02:59

Controlar un vídeo con un botón de un video_controls_bar

Me podéis decir cómo puedo hacer para que el botón "Pause" que he creado actúe sobre el vídeo. Es un video embebido de amara.org. También me gustaría incluir otro botón para que retroceda el vídeo 6 segundos por ejemplo.

¿Sabéis cómo hacer esto?

Os dejo el código que estoy usando y que no me funciona:

Código Javascript:

Ver original<!DOCTYPE html>
<html>
 
<head>
<style type="text/css">
div#video_controls_bar{ background: #333; padding:10px;}
</style>
 
<script type="text/javascript" src='http://amara.org/embedder-iframe'></script>
<script>
 
function playPause(btn,vid){
    var vid = document.getElementById(vid);
    if(vid.paused){
        vid.play();
        btn.innerHTML = "Pause";
    } else {
        vid.pause();
        btn.innerHTML = "Play";
    }
}
</script>
 
</head>
 
<body>
 
 
    <div id="my_video" class="amara-embed" data-height="234px" data-width="414px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>
 
 
 <div id="video_controls_bar">
    <button id="playpausebtn" onclick="playPause(this,'my_video')">Pause</button>
  </div>
 
</body>
</html>

Un saludo
Javier

javier_u · #2 (**permalink**) 22/11/2014, 09:55

Por favor no dejéis este tema. Mas de 130 personas han entrado y nadie ha respondido. Seguro que para algunos la solución es fácil. Yo no tengo ni idea de javascript ni de html.
Saludos.

IsaBelM · #3 (**permalink**) 22/11/2014, 11:44

El elemento está indefinido. Coloca el javascript después del html

javier_u · #4 (**permalink**) 22/11/2014, 12:16

No lo entiendo Isabel. ¿Puedes poner un ejemplo?. Tengo que poner el javascript en una pagina web, en un blog. Eso entiendo que es un documento html. Si lo pongo fuera entonces no sé dónde.
¿Cuál es elemento indefinido? ¿cómo hay que definirlo?

Muchas gracias.
Un saludo.

IsaBelM · #5 (**permalink**) 22/11/2014, 14:49

quise decir: el elemento no está definido. coloca el javascript después del html. o si lo entiendes mejor antes de la etiqueta </body>

Cita:

<div id="my_video" class="amara-embed" data-height="234px" data-width="414px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>

<div id="video_controls_bar">
<button id="playpausebtn" onclick="playPause(this)">Pause</button>
</div>

<script type="text/javascript" src='http://amara.org/embedder-iframe'></script>
<script>

function playPause(btn){
var vid = document.querySelector('aquí la id o class de la etiqueta <video>');
if(vid.paused){
vid.play();
btn.innerHTML = "Pause";
} else {
vid.pause();
btn.innerHTML = "Play";
}
}
</script>

ahora tendrás que buscar dentro del html generado por el include .js la etiqueta <video> y usar su id o class para referenciarlo

javier_u · #6 (**permalink**) 22/11/2014, 17:06

Cita:

Iniciado por IsaBelM

quise decir: el elemento no está definido. coloca el javascript después del html. o si lo entiendes mejor antes de la etiqueta </body>

ahora tendrás que buscar dentro del html generado por el include .js la etiqueta <video> y usar su id o class para referenciarlo

Gracias Isabel. Si no lo he entendido mal he dejado el código de la siguiente manera:

Código Javascript:

Ver original<!DOCTYPE html>
<html>
 
<head>
<style type="text/css">
div#video_controls_bar{ background: #333; padding:10px;}
</style>
 
 
</head>
 
<body>
 
    <div id="my_video" class="amara-embed" data-height="234px" data-width="414px" data-url="http://www.youtube.com/watch?v=5CKwCfLUwj4"></div>
 
 
 <div id="video_controls_bar">
    <button id="playpausebtn" onclick="playPause(this)">Pause</button>
  </div>
 
<script type="text/javascript" src='http://amara.org/embedder-iframe'></script>
 
<script> 
function playPause(btn){
     var vid = document.querySelector("my_video");
 
    if(vid.paused){
        vid.play();
        btn.innerHTML = "Pause";
    } else {
        vid.pause();
        btn.innerHTML = "Play";
    }
}
</script>
 
</body>
</html>

Creo que la linea que falla debe ser esta:
var vid = document.querySelector("my_video");

Comentabas que había que buscar dentro del html generado por el include .js la etiqueta <video> y usar su id o class para referenciarlo

Según esta linea que me dejaste:
var vid = document.querySelector('aquí la id o class de la etiqueta <video>');

Pero ¿cómo puedo saber el id o la class de la etiqueta <video>?

He probado a poner "my_video" con comillas dobles, simples, sin comillas. Y sin poner nada. También he probado a poner "amara-embed"...

Si me puedes decir que debo añadir o corregir. O cualquier otra persona del foro que sepa...

Muchas gracias.
Un saludo.

IsaBelM · #7 (**permalink**) 23/11/2014, 09:41

no he trabajado casi que nada con iframe.

si intentas acceder a uno de sus bloques

Cita:

console.log(window.frames[0].document.querySelector("#widget-div"))

obtienes este error

Cita:

Uncaught SecurityError: Blocked a frame with origin "http://127.0.0.1:8888" from accessing a frame with origin "http://amara.org". Protocols, domains, and ports must match.

de tal modo que me temo que no es posible hacer lo que pretendes

javier_u · #8 (**permalink**) 23/11/2014, 10:39

Cita:

Iniciado por IsaBelM

no he trabajado casi que nada con iframe.

si intentas acceder a uno de sus bloques

obtienes este error

de tal modo que me temo que no es posible hacer lo que pretendes

Entonces debe ser que no se puede crear un control para controlar un video embebido de amara.org, porque lo tienen bloqueado supongo. ¿Crees que no hay alguna otra forma de hacerlo?

Le he estado dando muchas vueltas y como no sé nada de javascript no conseguía nada. Pero si está bloqueado debe ser imposible.

Muchas gracias Isabel.
Un saludo.