Vídeos en Moodle. Mp4, html5 y trucos para incrustarlos

moodleLlevamos un tiempo trabajando en un proyecto con Moodle. La herramienta está muy bien, en pleno crecimiento, con gran soporte de la comunidad, y ahora esta (como la mayoría de las páginas web) viendo cómo incrustar los vídeos.
Hace unos años ni se nos ocurría meter vídeos en una web. Ahora es algo normal y casi esencial en las lecciones de Moodle. Pero todavía están viendo cómo hacerlo y pasando de Flash a html5.

Os dejamos algunos trucos que vimos (hemos trabajado con la versión 2.9).

  • Desactiva los Reproductores multimedia  antiguos: Ve a Administración del sitio>Apariencia>Incrustación de multimedia y desmarca las  opciones de los formatos que vayas a usar. Esto está para poder ser compatible con reproductores que no admitan html5 pero hoy en día lo admiten casi todos. Además, cuando yo activaba la opción de Quicktime el reproductor que usaban muchos navegadores para mp4 por alguna razón era ese y daba muchos problemas.
    De esta manera usarás si o sí vídeos html5 (con la etiqueta vídeo).
  • Moodle pone el tamaño de los vídeos por defecto y en teoría no se puede cambiar. Algo que creo viene heredado de cuando no se usaban tantos vídeos pero que creo que debe arreglarse pronto. Necesitamos poder ajustar el tamaño de los vídeos. En mi caso el tamaño por defecto era muy pequeño y tuve que buscar una solución. Os dejo dos:
    El tamaño del vídeo viene definido en el fichero  lib/medialib.php . Podrías cambiarlo ahí, pero no lo recomiendo. Moodle, en sus FAQ, recomienda cambiarlo en el fichero config.php de la raíz (donde lo cambiamos nosotros) o en el fichero config.php de tu tema en theme/themename/config.php.
    El código a poner (al final de ese fichero) es:

    … if (!defined(‘CORE_MEDIA_VIDEO_WIDTH’)) {
    // Default video width if no width is specified; some players may do something
    // more intelligent such as use real video width.
    // May be defined in config.php if required.
    define(‘CORE_MEDIA_VIDEO_WIDTH’, 800);
    }
    if (!defined(‘CORE_MEDIA_VIDEO_HEIGHT’)) {
    // Default video height. May be defined in config.php if required.
    define(‘CORE_MEDIA_VIDEO_HEIGHT’, 600);
    }
    if (!defined(‘CORE_MEDIA_AUDIO_WIDTH’)) {
    // Default audio width if no width is specified.
    // May be defined in config.php if required.
    define(‘CORE_MEDIA_AUDIO_WIDTH’, 400);
    }…

  • El problema que tendrás si haces lo anterior es que fuerza el tamaño grande también sí o sí a dispositivos móviles. Claro si le pones 600×400 a un móvil o a una tablet en vertical…no se ve el vídeo. Nosotros lo solucionamos por CSS forzando un max-width en el contenedor de vídeos si era un dispositivo de menos de x resolución por este método.
  • Otro problema inesperado con el que nos encontramos fue al subir varios vídeos a una lección. Nos encontramos que si subíamos más de 6 vídeos, a partir del 6º (esto puede variar según el servidor) no se mostraba nada mas que una pantalla negra.
    Tras mucho investigar encontramos que Moodle pone por defecto (también en el fichero lib/medialib.php) una etiqueta al video de css para que se carguen los metadatos e imágenes de todos los vídeos. Es decir pre-carga parte de todos los vídeos. Esto abre conexiones que, en ciertos navegadores (Chrome, Safari), llenaban las conexiones y los sockets. Vamos que no se veían.
    Solución:  En ese fichero hay una línea que pone: preload=’metadata’ . Hay que cambiarlo por
    preload=’none’
    Esto tiene el inconveniente que no se mostrará la imagen de pre-visualización del vídeo, sólo la barra de play. Pero puedes solucionarlo también por CSS añadiendo una imagen.

Subiré lo que vaya descubriendo por si ayuda a alguien más.