Videos en ventana emergente

Re: Videos en ventana emergente

de Mario Gayo -
Número de respuestas: 0

Después de mi mensaje anterior he hecho una prueba:

  • He creado un archivo HTML simple que servirá para mostrar una lista de vídeos. En principio tantos como deseemos.
  • En esta página solo aparecerá un enlace para cada uno y al pulsar sobre el enlace el vídeo se mostrará en una ventana emergente.
  • Como se utiliza una única variable, no se podrá visualizar un vídeo hasta que no se haya cerrado la ventana de otro. Esto más que una limitación creo que es una ventaja para no llenar la pantalla de vídeos.
  • Utilizo una función Javascript para lanzar la ventana emergente y utilizo un parámetro para pasarle el nombre del fichero.

Te adjunto la página para que veas que es tremendamente sencillo.

Para incrustarlo en Moodle:

  1. Se zipea todo (HTML + todos los vídeos de la página)
  2. Se sube como un recurso de tipo Archivo.
  3. Una vez subido el contenido, se descomprime el ZIP y ya se puede borrar
  4. Para terminar se marca el archivo HTML como archivo principal

Si después hay que añadir vídeos se pueden subir de manera independiente junto con el fichero HTML actualizado.

La página del ejemplo es demasiado simple para resaltar lo esencial. Los cambios que deberían introducirse para mejorarla serían:

  • Los archivos de vídeo los he subido junto con el archivo HTML y quedarán almacenados en Moodle. Si no te interesa que eso suceda para reducir el tamaño del curso, puedes utilizar referencias a ubicaciones externas. Basta con poner la referencia correspondiente en la llamada a la función.
  • Adaptar el tamaño de la ventana al tamaño del vídeo. Esto se podría hacer utilizado un par de parámetros adicionales en la llamada a la función proyectar.
  • Centrar la ventana emergente en la pantalla. Esto lo podría calcular la propia función en base a la resolución de la pantalla y el tamaño de la ventana emergente. No requeriría nuevos parámetros.
  • En el ejemplo he utilizado únicamente archivos en formato MP4. Para generalizar y que valga para todos los navegadores habría que incluir también los vídeos en formato WebM o incrustar un reproductor Flash. Para lo primero basta con añadir otro argumento source en el write de Javascript. En ese caso el nombre del fichero pasado como parámetro no debería tener extensión y la función crearía dos sources uno con la extensión '.mp4' y otra con ',webm'
  • He puesto la llamada a la función directamente en un elemento de tipo párrafo. Para ponerlo más atractivo y que resulte más evidente puedes utilizar un botón o crear un estilo más representativo mediante CSS.
  • También se podría formatear un poco mejor la ventana de reproducción, como por ejemplo que no aparezca el margen blanco alrdedor del vídeo, etc. Esto lo puedes hacer con CSS.
  • En otro tipo de recursos, como por ejemplo el Libro es posible que no funcione porque creo que no permite incrustar código Javascript. En ese caso podrías incluir la función Javascript en el tema que utilices y estaría disponible para todos los cursos de tu sitio. Esto no lo he probado pero debería funcionar.

Espero que te sirva.