Educa6 Insertar Video y Audio

De EducaMadrid Ayuda
Saltar a: navegación, buscar

AVISO: ESTA INFORMACIÓN CORRESPONDE A UNA VERSIÓN ANTIGUA QUE NO ESTÁ OPERATIVA ACTUALMENTE. PINCHA AQUÍ PARA VER ESTA INFORMACIÓN ACTUALIZADA.


Audiovideo1.png


El administrador de contenidos del portal educativo nos ofrece tres opciones distintas para integrar audios y/o vídeos en nuestros contenidos:

  • Insertando la URL del vídeo o audio que nos proporciona el sitio web dónde se encuentra alojado el vídeo o audio que queremos integrar.
  • Copiando y pegando el fragmento de html (código embebido) que nos proporciona el sitio web dónde se encuentra alojado el audio o vídeo que queremos integrar.
  • Subiendo los ficheros de audio o vídeo que previamente tengamos guardados en nuestro ordenador. La herramienta admite los siguientes formatos: flash, flv, mp3, mp4, Quicktime, mpg, mpeg, Windows Media y Real Media.


A continuación veremos cada una de estas tres opciones con un ejemplo:


Insertando la URL del vídeo/audio

Insertar vídeo de la Mediateca EducaMadrid Mediateca icono.png

Un profesor de secundaria está elaborando una sitio web en el que va a ir recogiendo información y actividades de interés para sus alumnos. En este caso, quiere integrar en su espacio web en EducaMadrid un vídeo de Animalandia que ha visto en la Mediateca de EducaMadrid. Para ello seguirá los siguientes pasos:

1.- En la mediateca de EducaMadrid buscará el vídeo que quiere integrar en su sitio web y una vez localizado, tendrá que copiar la URL del mismo. Podemos obtener dicha URL de dos formas distintas:

  • Copiando directamente la URL que muestra la barra del navegador o
  • Copiando la url del apartado "URL vídeo" que nos proporciona la Mediateca.


Insertarvideo mediateca1.png


2.- A continuación, en el cuerpo del contenido que vamos a elaborar insertaremos el vídeo que hemos localizado en la Mediateca. Para ello, pulsamos sobre el icono "Insertar archivo de la Mediateca" y en el campo "Dirección" pegamos la URL del vídeo que habíamos copiado previamente.


Insertarvideo mediateca2.png


3.- Una vez pegada la URL del vídeo elegido, bastará con pulsar sobre el botón Insertar. Automáticamente, veremos cómo el vídeo queda integrado en el contenido elaborado.


Insertarvideo mediateca3.png


4.- Tras "Guardar y salir", el contenido estará listo para poder mostrarse en el sitio web.


Insertarvideo mediateca4.png


Insertar vídeo de Youtube Youtube.png

Supongamos ahora que este profesor ha encontrado en Youtube un vídeo sobre la materia que está trabajando y desea que se muestre también en la página web. Bien, el proceso para ello será muy similar al que ha realizado para insertar el vídeo de la Mediateca. Seguiremos los siguientes pasos:

1.- Buscará en Youtube el vídeo que quiere integrar en su sitio web y una vez localizado, tendrá que copiar la URL del mismo. Podemos obtener dicha URL de dos formas distintas:

  • Copiando directamente la URL que muestra la barra del navegador o
  • Copiando la url del apartado "URL vídeo" que nos proporciona Youtube.


Insertarvideo youtube1.png


2.- A continuación, en el cuerpo del contenido que vamos a elaborar insertaremos el vídeo que hemos localizado en Youtube. Para ello, pulsamos sobre el icono "Insertar vídeo de Youtube" y en el campo "Dirección" pegamos la URL del vídeo que habíamos copiado previamente.


Insertarvideo youtube2.png


3.- Una vez pegada la URL del vídeo elegido, bastará con pulsar sobre el botón Insertar. Automáticamente, veremos cómo el vídeo queda integrado en el contenido elaborado.


Insertarvideo youtube3.png


4.- Tras "Guardar y salir", el contenido estará listo para poder mostrarse en el sitio web.


Insertarvideo youtube4.png

Insertar audio de la Mediateca EducaMadrid Mediateca icono.png

Por último, vamos a ver cómo insertar un audio relacionado con esta temática que hemos localizado en la Mediateca EducaMadrid. Seguiremos un proceso igual al empleado para insertar un vídeo. Para ello,

1.- Una vez localizado el audio en la Mediateca, copiamos su URL. Igual que sucedía en el caso de los vídeos, tenemos dos formas diferentes de copiar su URL:

  • Copiando directamente la URL que se muestra en la barra del navegador.
  • Copiando la URL que nos proporciona la Mediateca en el campo "URL de esta página:"


Insertaraudio mediateca1.png


2.- A continuación, en el cuerpo del contenido que vamos a elaborar insertaremos el audio que hemos localizado en la Mediateca. Para ello, pulsamos sobre el icono "Insertar archivo de la Mediateca" y en el campo "Dirección" pegamos la URL del audio que habíamos copiado previamente.


Insertaraudio mediateca2.png


3.- Una vez pegada la URL del audio elegido, bastará con pulsar sobre el botón Insertar. Automáticamente, veremos cómo el audio queda integrado en el contenido elaborado.


Insertaraudio mediateca3.png


4.- Tras "Guardar y salir", el contenido estará listo para poder mostrarse en el sitio web.


Insertaraudio mediateca4.png


Copiando y pegando el fragmento de HTML (código embebido) Codigoembebido icono.png

Vídeo tutorial: Insertar vídeo

EmbedVideo was given an illegal value for the alignment parameter "405". Valid values are "left", "center", or "right".


La funcionalidad de fragmento html o código embebido nos permite incluir en nuestros sitios web de EducaMadrid audios y vídeos alojados en otras páginas o sitios web de una forma fácil y rápida.


El primer paso consiste en localizar este fragmento de código del audio o vídeo que nos interesa. En la Mediateca de EducaMadrid o en Youtube, por ejemplo, podemos encontrar audios y vídeos que nos pueden resultar útiles y de los que podemos incorporar el código embebido a los contenidos elaborados con el Administrador de Contenidos.

Veámoslo con un ejemplo:

Supongamos que deseamos incorporar un vídeo de Youtube ("Música y el cerebro") a nuestra página web en EducaMadrid. Para ello, una vez localizado el vídeo en Youtube copiaremos su código embebido:


Embebido youtube1.png


2.- A continuación, en el cuerpo del contenido que vamos a elaborar insertaremos el vídeo cuyo código hemos copiado de Youtube. Para ello, pulsamos sobre el icono "Pegar fragmento de HTML (código embebido)"


Embebido youtube2.png


3.- Una vez pegado el código embebido del vídeo elegido, bastará con pulsar sobre el botón Insertar. Automáticamente, veremos cómo el vídeo queda integrado en el contenido elaborado.


Embebido youtube3.png


4.- Tras "Guardar y salir", el contenido estará listo para poder mostrarse en nuestro sitio web.


Insertar embebido1.png

Visualización del objeto insertado o embebido

Cuando en un contenido insertamos o embebemos un objeto multimedia, a menudo nos encontramos con que algunos menús desplegables, ventanas emergentes..., se colocan por debajo de dicho objeto:


Objetoembebido mal.png


Para resolver este problema, debemos añadir al código del objeto embebido lo siguiente:

1.- Si la etiqueta es un <object>, añadimos <param name="wmode" value="transparent" /> justo antes de la etiqueta de cierre:</object>

Quedaría así: ...<param name="wmode" value="transparent" /></object>

2.- Si la etiqueta es <embed>, añadimos el siguiente parámetro: wmode="transparent" un poco antes del final: </embed>

Quedaría así: ... wmode="transparent"></embed>


En nuestro ejemplo, observamos al editar el código embebido que se trata de una etiqueta <object>. Añadimos entonces justo antes del cierre del "object" el siguiente parámetro: <param name="wmode" value="transparent" />.


Objetoembebido bien.png


Si visualizamos nuevamente el contenido en nuestra página web podemos comprobar que el problema ha quedado resuelto:


Objetoembebido.png






Cómo insertar un vídeo o audio desde mi ordenador

Vídeo tutorial: Insertar archivo multimedia

<mediateca v="tfrvln4l7om8afge" ancho="508" alto="405" />

Para insertar un vídeo audio de nuestro ordenador tendremos que hacer lo siguiente:

Pulsamos sobre el icono Wiki insertarvideoyaudio2.png.

Hecho esto nos aparecerá la siguiente pantalla en la cual tendremos que seleccionar que tipo de fichero es el que queremos insertar.

Wiki insertarvideoyaudio4.png

A continuación subimos el fichero al disco duro del contenido y una vez el proceso de subida del archivo ha finalizado, pulsamos sobre Listado.

Wiki insertarvideoyaudio5.png

Desde aquí seleccionaremos el fichero que acabamos de subir y pulsamos sobre Seleccionar:

Wiki insertarvideoyaudio6.png

Tras esto, podremos indicar el tamaño en el que queremos que sea visible nuestro video, así mismo nos mostrará la previsualización del mismo. Una vez hemos definido el tamaño, pulsamos en insertar.

Wiki insertarvideoyaudio7.png

A continuación, en el cuerpo del contenido veremos que se ha insertado un cuadro de las mismas dimensiones que el vídeo.

Wiki insertarvideoyaudio8.png

Para previsualizar como queda el contenido creado pulsaremos en Previsualizar contenido.