iDESWEB

Introducción al desarrollo web, primer curso MOOC sobre desarrollo web en español

iDESWEB - Introducción al desarrollo web, primer curso MOOC sobre desarrollo web en español

YouTube: inserción de un vídeo

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un vídeo de YouTube en una página web.

¿Crees que es difícil lograr que un vídeo cualquiera de YouTube aparezca en una página web?

Como te voy a mostrar a continuación, es muy sencillo, pero debes llevar un poco de cuidado.

En este ejemplo, vamos a insertar el vídeo “Evolución de la Web: de la página web a la aplicación web” en una página web que yo he realizado.

Una vez localizado el vídeo en YouTube tienes que buscar la opción “Compartir”. Hay tres métodos para compartir un vídeo: la opción “Compartir”, la opción “Insertar” y la opción “Enviar por correo”.

Vamos a emplear la opción “Insertar”, que nos permite insertar el vídeo en una página web. Tenemos aquí varias opciones. Podemos, por ejemplo, indicar que queremos insertar todo el vídeo o la lista de reproducción en la cual se encuentra el vídeo. En este caso, si queremos insertar la lista de reproducción podemos elegir a partir de qué vídeo, a partir del vídeo actual o a partir del primer vídeo de inicio de la lista de reproducción y también podemos elegir la forma de visualizar el vídeo cuando lo insertamos. Podemos cambiar el tamaño por defecto que aparece y podemos indicar si queremos que se muestren los controles del reproductor, reproducir, parar, avanzar y si queremos que se muestre el título del vídeo y acciones adicionales del reproductor.

Voy a dejar las opciones por defecto. Lo que voy a desactivar es “Compartir con la lista de reproducción” porque solamente quiero insertar el vídeo actual. Fíjate que cuando activo o desactivo la opción se modifica este código de aquí. Este código de aquí es el código que yo voy a copiar para insertar en mi página web. Lo dejo con la opción de no compartir la lista de reproducción, copio el código, muy importante, debo de copiar todo el código, si me dejo una parte, seguramente fallará. Lo copio y me lo llevo a mi página web.

Aquí tengo una página web sencilla en la que pego mi código fuente.

Lo guardo, le doy a ejecutar y, aquí debajo del encabezado <h1>, debajo del encabezado <h1>, debería de salir el vídeo. Sin embargo no va a salir. Puedo estar aquí esperando y esperando, y al final el vídeo no saldrá, seguramente saldrá un mensaje de error. Fíjate que está el icono de cargando la página.

¿Cuál es el problema?

Bueno, el problema está aquí en el atributo source, en la URL de carga del vídeo. El código de YouTube está preparado para insertar un vídeo en una página “viva”, una página real que está publicada en Internet.

En este caso mi página no está publicada en Internet, mi página la estoy ejecutando en local. Fíjate que aparece el protocolo, el esquema file. Este código está así porque está preparado tanto para conexiones http como conexiones https. El navegador incluirá aquí delante http o https según el tipo de página en la que estemos.

Esto sólo funciona cuando la página se ha transmitido a través de http, es decir, cuando la página está realmente en Internet. Como en este caso, como he dicho, está en local, el prefijo http, el esquema lo tengo que colocar yo a mano. Así que le pongo “http:”, lo grabo, ejecuto y ahora sí que sale el vídeo, el vídeo que funciona sin problemas. Yo puedo avanzar, le puedo dar a pausa o incluso podría ponerlo a pantalla completa, como puedes observar.

Así que, repito, simplemente hay que copiar el código de inserción, se copia en nuestra página web y a funcionar, salvo este pequeño detalle que hay que tener en cuenta cuando estamos ejecutando la página en local. Si la página está realmente publicada en Internet, con esto es suficiente.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Categoría: Sin categoría
  • josé comentó:

    no puedo ver videos me entra pero se queda cargangando y no se pone

Tu dirección de correo no será publicada. Los campos obligatorios están marcados con *

*