A raíz de un artículo que escribí hace ya un tiempo en el que explicaba cómo crear enlaces de descarga directa para archivos de Google Drive o de OneDrive, un lector me preguntaba si se podría utilizar alguna técnica similar para poder embeber vídeos subidos a OneDrive en una página propia, albergada fuera de los servidores de Microsoft.
Me decía que si ponía una etiqueta iframe apuntando a la URL que yo indicaba cómo generar, que se mostraba la página de OneDrive, pero no se veía el vídeo. Claro, lógicamente, porque si haces eso estás simplemente enlazando con la página de OneDrive que visualiza el vídeo, pero no estás visualizando el vídeo en sí.
En OneDrive, al seleccionar un archivo de tipo Office (Excel, Word o PowerPoint), una de las opciones que te proporciona, aparte de compartirlo, es embeberlo. Por ejemplo, en esta imagen tengo seleccionada una hoja de cálculo de Microsoft Excel, y me permite generar el código para embeberla en cualquier página externa:
Por el contrario, no permite embeber vídeos en páginas externas y no ofrece esa opción "Embed" en el caso de un vídeo.
Así que de entrada la respuesta es que no se puede.
Sin embargo, pensé que seguramente no sería tan difícil "hackear" un poco OneDrive para permitir usarlo como repositorio externo de vídeos que podamos usar en otras páginas. Y realmente se puede conseguir, aunque con algunas limitaciones.
Vamos a ver el proceso, y luego las limitaciones que tiene...
Conseguir un enlace al archivo de vídeo
Cuando pulsamos el botón de "Compartir" ("Share") con un video seleccionado, podemos hacer como con cualquier otro archivo y obtener una dirección única para poder enviar a cualquier persona con la que queramos compartirlo. Esta dirección es similar a esta:
https://onedrive.live.com/redir?resid=f18d3bacf4b94c!149&authkey=!AC3ni_d9Q&ithint=video%2cmp4
Si copias y pegas esto en la barra de direcciones de tu navegador, el URL cambiará y aparecerá una nueva, similar a esta:
https://onedrive.live.com/?cid=f1a6bacb4c&id=f1a3bacb94c%21143279&ithint=video,mp4&authkey=!AC3Oi_dyFkQ
Como ves, utiliza varios parámetros (que he marcado en rojo):
· cid
· id
· ithint
· authkey
Lo que tienes que hacer es retirar el parámetro "cid" completo, cambiarle el nombre al parámetro "id" poniéndole "resid" en su lugar, y finalmente ponerle delante de la interrogación la palabra "download.aspx".
De este modo te quedará una URL como esta:
https://onedrive.live.com/download.aspx?resid=f1a3bacb94c%21143279&ithint=video,mp4&authkey=!AC3Oi_dyFkQ
He resaltado en rojo los cambios que he hecho, que como ves son muy sencillos.
Con esto tienes un URL de descarga para el vídeo que previamente hayas subido a OneDrive.
NOTA: Con este URL lo que se descargará es el archivo original que hayas subido. Esto es algo muy importante, como veremos luego cuando comente las limitaciones.
Embeber el vídeo en la página
Vale, ahora lo que hay que hacer es definir el código necesario para poder visualizar el vídeo.
En tu página, en lugar de usar un iframe vamos a usar un elemento video de HTML5, así:
<video controls>
<source
src="https://onedrive.live.com/download.aspx?resid=f1a68d3bacf4b94c!143279
&ithint=video,mp4&authkey=!AC3nNtOi_d9yFkQ" type="video/mp4">
</video>
En el atributo "src" de la etiqueta source pondremos la dirección que obtuvimos en el apartado anterior.
De este modo lo que conseguiremos es que el vídeo se reproduzca directamente desde OneDrive, por lo que no consumiremos ancho de banda propio sino que se lo "gorronearemos" a Microsoft.
También convendría ponerle el ancho y el alto del vídeo para que el elemento tenga su tamaño final ya desde el momento en el que carga. Si no lo hacemos así, hasta que los usuarios pulsen el botón de reproducir y se inicie la descarga del vídeo, no se sabrá el tamaño y tendrá un tamaño por defecto bastante pequeño.
Limitaciones
Cuando subimos un vídeo a OneDrive, lo que hace la aplicación es recodificarlo en varios formatos diferentes apropiados para distintos navegadores, dispositivos y anchos de banda. Algo similar a lo que hacen YouTube, Vimeo y otros servicios online para vídeo. De este modo se aseguran que cualquiera que quiera verlo lo podrá hacer sin problemas.
Sin embargo el vídeo que tú subas no tiene por qué ser válido para Internet o para cualquier dispositivo, aunque luego puedas verlo sin problemas en OneDrive.
Con lo que he explicado en los apartados anteriores lo que se usará para reproducir el vídeo es tu archivo original, no esas versiones especiales que genera OneDrive. Por eso, si vas a usar lo que explico, tienes que asegurarte de que tu vídeo tiene el formato apropiado para que se visualice bien en los diferentes navegadores, dispositivos y anchos de banda.
Ello, hoy por hoy, implica que como mínimo el vídeo debería estar codificado como MP4/H.264, válido para streaming en casi todos los navegadores del mercado.
Si quieres tener varias versiones adaptadas para varios navegadores, etc... lo que puedes hacer es subir todas esas versiones del vídeo (por ejemplo en formato WebM, Ogg Theora Vorbis aparte de MP4 y en varias resoluciones) y utilizar el truco con cada uno de ellos para ir añadiendo etiquetas "source" al elemento video como acabamos de ver.
Esto te dará trabajo, pero si quisieras albergar el vídeo en tu propio servidor lo tendrías que hacer igual. En este caso te ahorras el ancho de banda necesario para albergarlos y servirlos con garantías de velocidad.
Otra cosa: si pruebas lo que acabo de explicar, en local con Internet Explorer, el vídeo no se verá. Sí que funcionará con Chrome y Firefox. Para que funcione en IE tienes que solicitar tu página a un servidor web, no vale directamente desde el sistema de archivos. Pero funcionará sin problemas en cuanto lo cuelgues en un servidor.
¡Espero que te sea útil!
💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor
