JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Gorroneando OneDrive: Cómo embeber un vídeo desde OneDrive en una página propia

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áginad e 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:

Embeber-Excel-OneDrive

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!

José Manuel Alarcón José Manuel Alarcón
Fundador y director de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (5) -

Hola Gracias al hermano que hizo esta pagina me a servido, pero necesito hacer lo mismo con otro servidor que de mas megabit gratuitos ya que onedrive solo esta dando 5 G podria ser, Mega o google drive alguno de esos que dan bastante espacio gratis Saludos y de nuevo gracias.

Responder

saludos, gracias por la informacion la estaba utilizando de maravilla, pero onedrive acaba de hacer cambio, para ver si es posible que publique la nueva forma de ponerlo a descarga https://1drv.ms/v/s!AkgQN5bNaH-qjHRAYWCkT2AMzadA

Responder

by Jose M. Alarcon

Es lo que tiene saltarse lo que en teoría permiten hacer o no con la herramienta: que en cualquier momento te lo cambian y te deja de funcionar ;-)

Al final de este otro post tienes una explicación del pequeño cambio que ha habido y cómo solucionarlo: www.jasoft.org/.../...gle-Drive-o-de-OneDrive.aspx

Responder

Gerardo Velez

Estimado Jose, gracias por el ti. Me ha funcionado para lo que quiero de maravilla. Sin embargo, se me ocurre que tal vez me puedas ayudar con algo similar. Hay un servidor de descarga de videos, es OPENLOAD. Ellos te dan la opcion de descarga de videos accediendo a su página. Lo que yo quiero es que desde un blog, se pueda pegar un link "<a>" para que vaya directamente a la descarga del video. De hecho, cuando sigo tus instrucciones con el video de onedrive, lo coloco dentro de una etiqueta "<a>" y me descarga el video directamente. Quiero saber si se puede hacer lo mismo con este servidor de OPENLOAD.

Una vez más, muchas gracias por tu tiempo y por tus conocimientos.

Responder

by Jose M. Alarcon

Hola Gerardo:

Lo siento pero no conozco ese servicio en absoluto (ni siquiera había oído hablar de él), así que no puedo ayudarte :-(

Saludos.

Responder

Agregar comentario