[ES] El video de las 8 mantas

Recientemente en el último proyecto que vengo realizando nos encontramos un caso muy particular. El cliente, un loco de la seguridad, decidió que en su aplicación quería alojar los videos de sus noticias internas bajo capas de seguridad para no tener que habilitar un nuevo servidor o configuración y aprovechar ya su infraestructura actual.

Su infraestructura de seguridad nos daba un token,que debe ser enviado en la cabecera de la petición, para recuperar el vídeo. Así que decidimos implementar el lector de noticias bajo una app html5 y así poder aprovechar el diseño que el propio cliente le daba a las mismas para mostrarlas en su app.

No podemos asignar el src tal cual porque entonces no llevaría en el header la petición nuestro token de acceso y por tanto no nos devolvería el video. De modo que esto se convirtió en un: “cómo recuperar un video y pasárselo a un tag video cuando no tienes la url completa”.

La solución se compone por tanto de una petición XMLHttpRequest en la que recuperamos el video cómo un blob y generamos la url para proporcionarle al tag video.

Para llegar a esta solución nos dimos con varios problemas, el primero de ellos era que usábamos “window.URL.revokeObjectURL(vidSrc);” y por ello recibíamos un bonito mensaje en la consola que nos decía: Not allowed to load local resource: blob:null/ba346ea6-9e6a-4343-ae64-57904ae0a0ec.

Otro de los escollos fue querer asignar a la petición del XMLHttpRequest que el tipo de respuesta era un video en vez de un blob con esta línea: “oReq.responseType = “video/mp4″;” lo que provocó que recibiéramos “Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided.”.

Todos ellos errores bastante comunes y con no mucha documentación al respecto en el tratado de vídeos.

PD: Por último, mi recomendación es que creéis una función que escuche el estado final de carga del vídeo y realice el revokeObjectURL de forma que libere el objeto que se creó para la gestión del vídeo.