Insertar cargar vídeo según url que ingreso en un input text.

javier_u · #1 (**permalink**) 24/11/2014, 10:09

Tengo sólo un input y un botón.

Código Javascript:

Ver original<input type="url" name="tex1_url">
  <button onclick="myFunction()">Click me</button>

Al pulsar el botón quería que se cargase el vídeo (url) que indico en el input text.
Por ejemplo éste video:
http://www.youtube.com/watch?v=5CKwCfLUwj4
o éste:
https://s3.amazonaws.com/ted.conferences/talk/transcript/2014P/None/RamananLaxminarayan_2014P-transcript.mp4

El vídeo debe ir embebido tal como esto:

Código Javascript:

Ver original<div id="my_video1" class="amara-embed" data-height="260px" data-url="https://s3.amazonaws.com/ted.conferences/talk/transcript/2014P/None/RamananLaxminarayan_2014P-transcript.mp4" data-width="460px">
 
    <script src="http://amara.org/embedder-iframe" type="text/javascript"></script>

No sé nada de javascript. He mirado mucho en la red y no he conseguido encontrar nada. Por favor me podrían decir con qué función y con qué código podría hacer esto.

Muchas gracias.
Un saludo
Javier

Alexis88 · #2 (**permalink**) 24/11/2014, 11:43

Sería ideal que utilizaras un elemento <iframe> para mostrar el vídeo embebido, luego, una vez que el usuario ingrese la URL del vídeo en la caja de texto, pulsas el botón y ejecutas una función, en la cual le darás a la URL del vídeo la forma necesaria para que pueda ser embebida en el <iframe> y, finalmente, la asignas a dicho elemento.

Un ejemplo:

Código HTML:

Ver original<input type = "text" id = "url" placeholder = "Ingrese la URL del vídeo" />
<button id = "cargar">Cargar vídeo</button>
<iframe id = "video"></iframe>

Código Javascript:

Ver originalvar input = document.getElementById("url"),
    button = document.getElementById("cargar"),
    iframe = document.getElementById("video"),
    urlEmbed;
 
button.addEventListener("click", function(){
    urlEmbed = input.value.replace("watch?v=", "embed/");
    iframe.src = urlEmbed;
}, false);

DEMO

Saludos

javier_u · #3 (**permalink**) 24/11/2014, 13:42

Muchas gracias Alexis. El ejemplo que me has dejado funciona muy bien. Lo que pasa es que necesitaba embeberlo según este iframe de amara.org:

Código Javascript:

Ver original<div id="my_video1" class="amara-embed" data-height="260px" data-url="https://s3.amazonaws.com/ted.conferences/talk/transcript/2014P/None/RamananLaxminarayan_2014P-transcript.mp4" data-width="460px">
 
    <script src="http://amara.org/embedder-iframe" type="text/javascript"></script>

Tu ejemplo lo he utilizado así y va bien:

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<body>
 
 
<input type = "text" id = "url" placeholder = "Ingrese la URL del vídeo" />
<button id = "cargar">Cargar vídeo</button>
<div>
<iframe id = "video"></iframe>
</div>
 
<script>
var input = document.getElementById("url"),
    button = document.getElementById("cargar"),
    iframe = document.getElementById("video"),
    urlEmbed;
 
button.addEventListener("click", function(){
    urlEmbed = input.value.replace("watch?v=", "/embed/");
    iframe.src = urlEmbed;
    alert("El resultado es " + urlEmbed);
}, false);
 
 
</script>
 
</body>
</html>

Pero yo he intentado adaptarlo de ésta manera (entre otras) y no me funciona, no lo he podido embeber. ¿Sabes cómo lo podría hacer?

Código Javascript:

Ver original<!DOCTYPE html>
<html>
 
<body>
 
<input type = "text" id = "url" placeholder = "Ingrese la URL del vídeo" />
<button id = "cargar">Cargar vídeo</button>
<div>
<iframe id = "video" class="amara-embed" src="http://amara.org/embedder-iframe" type="text/javascript"></iframe>
</div>
 
<script>
var input = document.getElementById("url"),
    button = document.getElementById("cargar"),
    iframe = document.getElementById("video"),
    urlEmbed;
 
button.addEventListener("click", function(){
    urlEmbed = input.value.replace("watch?v=", "/embed/");
    iframe.src = urlEmbed;
}, false);
 
</script>
 
  <script src="http://amara.org/embedder-iframe" type="text/javascript"></script>
</body>
</html>

Gracias por tu ayuda.
Un saludo.

Alexis88 · #4 (**permalink**) 24/11/2014, 13:55

Lo he probado y logro embeber los vídeos, pero no puedo utilizar el script de Amara por el tema de la política de origen. Mas bien, cometí un error en el código que te pasé; en lugar de "/embed/" debe de ser "embed/", sin la barra inclinada del inicio.

Saludos

javier_u · #5 (**permalink**) 24/11/2014, 14:15

Cita:

Iniciado por Alexis88

[URL="http://jsbin.com/nocido"]Lo he probado[/URL] y logro embeber los vídeos, pero no puedo utilizar el script de Amara por el tema de la política de origen. Mas bien, cometí un error en el código que te pasé; en lugar de "/embed/" debe de ser "embed/", sin la barra inclinada del inicio.

Saludos

El vídeo tal como quería que saliese embebido es así:

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<body>
 
    <div id="my_video1" class="amara-embed" data-height="260px" data-url="https://s3.amazonaws.com/ted.conferences/talk/transcript/2014P/None/RamananLaxminarayan_2014P-transcript.mp4" data-width="460px">
 
    <script src="http://amara.org/embedder-iframe" type="text/javascript"></script>
 
</body>
</html>

A bajo contiene unos controles de amara.org con los cuales se puede elegir el idioma y se puede leer la transcripción.

Eso era lo que me falta conseguir. No sé si será muy complicado.

Muchas gracias, Alexis.
Un saludo.