Pueblerino 117


Desvaríos varios Some nonsense
Idioma Language

Cómo incrustar video o audio... con nuestras condiciones

How to embed video or audio... with our conditions

A veces, bueno, de hecho lo que estoy escribiendo ahora, y todos lo servicios que yo he usado siempre han sido gratuitos, pues no nos queda otra que pasar por el aro y usar servicios gratuitos, sea por la razón que sea (falta de tiempo de hacer una página web o blog, falta de conocimientos, falta de dinero, falta de recursos) y nos vemos tremendamente limitados para con algunos aspectos de nuestra web/blog, a pesar de que sitios como blogger, por ejemplo, te permiten editar incluso la plantilla xhtml del blog, en este caso, pero aun así está la cosa algo limitada.

Una de las cosas que no me gustan es no poder controlar, en esta era multimedia de Internet que nos está tocando vivir, cómo quieres colgar videos o audio en tu web. Y lo digo porque si usas un servicio de terceros como YouTube, o Dailymotion, o Metacafe, o Goear, o...; vale, puedes incrustar video o audio en tu blog o página web, pero, ¿en qué condiciones? Malas, muy malas, ya que te recomprimen el video o el audio y pierde la calidad que esperas mostrar.

La otra opción es usar un hosting gratuito de archivos como, por ejemplo, Megaupload, Rapidshare, Mediafire, etc. Pero con estos tenemos otro problema, que ya no estamos incrustando video, sino poniendo un link de descarga, así que ya no estamos mostrando el video, sino un link de descarga y, para remate, igual no nos interesa ni que se descarguen el video los que visitan la página o blog.

¿Cómo podemos, entonces, incrustar un video o audio con nuestras condiciones?

Bueno, antes de continuar, voy a ser franco, pleno control de las condiciones no tienes "nunca" (mientras no hay dinero de por medio), pero de la manera que lo planteo ganas en que la forma (calidad, compresión, formato) en que subes el video o audio es exactamente igual a la que muestras a la gente, es decir, sin sufrir recompresiones o ediciones en el video o audio que tu no deseas, además de control sobre los archivos que subes, ya que puedes borrarlos, renombrarlos, etc.

Después de tener esto claro, además de conocer el código (<embed>) necesario para incrustar el video, lo que necesitaremos será un hosting que permita hotlinking, es decir, acceso directo a los archivos.

Y esto yo lo he encontrando con sitios como Hotlinkfiles.

Act. 09-09-15 Como HotlinkFiles se ha ido al carajo, ahora paso a usar FileDen. Vosotros usad el que más os convenga, recordad, siempre que permita hotlinking.
Las explicaciones que siguen, todavía son válidas, con la salvedad de que FileDen ofrece 100KB/s de descarga y 5GB mensuales.

Act. 09-09-19: Hotlinkfiles parece recuperarse pero por el momento hay archivos perdidos, concretamente los de esta entrada del blog, los videos. Esta explicación se quedará con Fileden.com

Act. 10-04-15: HotlinkFiles ha desaparecido totalmente de la red, quito el link para evitar confusiones.

Con un hosting así y el código necesario, podrás incrustar cualquier archivo, esto es: AVI, MP4, WMV, MP3, WMA, etc.

Con Hotlinkfiles, con la limitación propia de una cuenta gratuita, no podremos subir archivos muy grandes (50MB), ni tener mucha descarga disponible (cuidado con páginas con muchas visitas), aunque sigue siendo muchísimo (8GB al mes), ni tampoco la velocidad de descarga será muy alta según la saturación del servidor y nuestra cuenta podrá caducar a los 30 días de inactividad...

De todas formas, podremos subir cualquier tipo de archivo, ya sea video, audio, html, lo que sea, y poder linkarlos directamente, y además 50MB de límite de archivo nos da para un video de 5 minutos a un bitrate de 1000Kbps de video y 192kbps de audio que no está nada mal, pero recordemos, codificado como nosotros queramos, sin recompresiones ni pérdidas de calidad no deseadas. Es decir, podremos subir un video en x264/H264 a 1000kbps que es una calidad buenísima, superando ampiamente a Xvid, o subir un audio MP3 a 320kbps o... Cualquier cosa. Cualquier archivo. Sin manipulaciones.

Con estas características, podremos poner en nuestra página cualquier video que nosotros queramos con toda la potencia añadida que supone el poder controlar, con el código html <embed>, la apariencia del reproductor y la forma en la que se mostrará el video.

En mi caso yo buscaba poder poner videos en AVI y MP4 y audio en MP3. En concreto buscaba poder poner AVIs y, más concretamente, porque el plugin Divx Web Player, que es el necesario, sí que permite aceleración por hardware, no como Flash, y reproducir un video en estas condiciones es tremendamente liviano para los ordenadores de los visitantes de nuestras páginas. Además, puedes usar códecs como Xvid, DivX y x264/H264 y sacarle todo el rendimiento. Y como en la forma que comento no nos recomprimen el video pues podemos mostrarlo con la calidad deseada.

Act. 11-03-14: Desde la versión 10.2, Flash incluye aceleración por hardware un poco más avanzada, pero el reproductor que yo uso aquí no la tiene habilitada.

Como decía, para incrustar AVI, se necesitará el plugin Divx Web Player (o, mejor dicho, haremos uso de él cuando lo instale el visitante en su navegador), que nos permitirá ver casi cualquier archivo AVI (si utiliza un códec MPEG-4 (divx, xvid, x264/h264 (y alguno más)), ya que se usan los códecs instalados en nuestro PC, aunque ojo con los AVI en x264/h264 si tenemos el códec de CoreAVC, ya que aunque este plugin permite reproducirlos, el códec ofrece resultados inesperados, mejor el códec x264vfw.

Recomiendo el plugin en su versión 1.3.1 (o, en su defecto 1.5.1), que es la más estable. Un generador de código html, que nos ayudará a incrustar el video, se puede encontrar en la página de los laboratorios de Divx, además de un zip con una guía en PDF para los webmasters (SDK):

http://labs.divx.com/Webplayer/es

Para videos en MP4 o FLV (no todos los MP4 funcionan, pero sí los FLV (aunque recordemos que un FLV también puede llevar video en H264)) y para los archivos de audio en MP3, usaremos el reproductor gratuito en flash FLV-Player y MP3-Player, de Neolao productions y con pequeñas variaciones, para video y audio, respectivamente. Si indagamos en la configuración de los mismos nos sorprenderemos del potencial que tienen.

Y, ahora, para muestra de las posibilidades (aunque yo sólo he puesto los reproductores más básicos, el enredar con ellos os lo dejo a vosotros), un botón ;)

Los he puesto ocultos para sí ahorrar recursos, no cargar los plugins y que la carga de la página no sea tan pesada. Siempre ahorrando ;)

Act. 09-10-26: Arreglado pequeño problema de visualización en Internet Explorer.

Act. 11-07-03: Cambiado el vídeo que se muestra con Divx Web Player a un AVI con contenido en x264.

Act. 13-11-13: Como FileDen ha desaparecido, y no encuentro otro hosting que permita links directos, estos ejemplos ya no son funcionales. LO SIENTO.

Sometimes, well, indeed where I'm writing now, and every service I've ever used has been for free, we have to use free services on the net, for any reason (just because we have no time to make a page/blog, lack of knowledge, lack of money, whatever) and we are forced to be limited with some features of our web/blog, even with sites like blogger, for example, that lets you edit very easy the templates and other things, but, still, we are quite limited.

One of the things I don't like it's to not be able to control, in this multimedia era of the Internet we are living, how do you want to put videos or audio in your web. And I say this because if you use third party services as YouTube, or Dailymotion, or Metacafe, or Goear, or...; ok, you can embed video or audio in your blog or web page, but, what conditions with?. Bad, very bad, because they recompress the video or the audio and it lost the quality you expected to show.

Another option is to use free file hostings as, for example, Megaupload, Rapidshare, Mediafire, etc. But with these we deal with another problem, we aren't embedding a video now, we are just showing a link, so we are not showing now the video, but the download link and, maybe, we don't want our visits to download the video.

How can we embed video or audio, then, with our conditions?

Well, before continue, I'm going to be frank, we'll never have full control over the conditions (while there is no money in the middle), but this way I tell we ensure that our files (quality, compression, format) are exactly the same as we upload, without the recompress or editings in the video or audio that we didn't wish, and we have the control over the files we upload, because you can delete them, rename them, etc.

After we have this clear, besides know the needed code (<embed>) to embed our video, we will need a hosting that lets us make hotlinking, I mean, direct access to files.

And I found this with sites like Hotlinkfiles.

Updt. 09-09-15 As HotlinkFiles looks down, now I start using FileDen. You use whichever fits your needs, but remember to chose one that lets hotlinking.
The explanations below are still valid, but FileDen offers 100KB/s of download and 5GB transfer per month.

Updt. 09-09-19: Hotlinkfiles looks is recovering but files look missing. This explanation will be left with FileDen.com

Updt. 10-04-15: HotlinkFiles has definetelly disappeared from the net, so I remove the link to avoid confusions.

With a hosting like this and the necessary code, you could embed any file, this is: AVI, MP4, WMV, MP3, WMA, etc.

With Hotlinkfiles, with the limit of a free account, we won't be able to upload files larger than 50MB, and we won't have much download limit (caution with pages with lots of visits), but still it's so much (8GB month), we won't have very high download speed and it could depend on the server load and our account could expire after 30 days of inactivity...

Anyway, we could be able to upload any file type (or almost), and this means video, audio, html, whatever, and be able to link them directly, and with the limit of 50MB per file it's enough for a video of 5 minutes at a bitrate of 1000Kbps for video and 192kbps for audio what is not bad, but remember, the file would be coded as we wish, without unwanted recompressions or lose of quality. This means, we could upload a video coded with x264/H264 at 1000kbps that is a good quality, over Xvid quality, or upload MP3 at 320kbps or... Anything. Any file. Without manipulations.

With these features, we could put in our website any video with all control, with the help of the <embed> code, the appearance of the player and the way that we will show our video.

In my case, I was searching for a way to put in my web AVI and MP4 videos and MP3 audios. And more precise, to put AVIs and, more precise, with the Divx Web Player, which is needed, that really offers hardware acceleration, not like flash, and play a video with these conditions it's very light for the computers of our visitors. Besides, you can use códecs like Xvid, Divx and x264/H264 and use all its power. And, as I told, no one recompress our videos, we can show them with our desired quality.

Updt. 11-03-14: From 10.2 version, Flash has better hardware acceleration but the player I use here hasn't it enabled.

As I said, to embed AVI, we will need the Divx Web Player plugin (or, better said, we use it when our visitors install it on their browsers), that will let as to see almost any AVI file (if uses an MPEG-4 codec (divx, xvid, x264/h264 (and some others)), because the plugins uses the codecs installed on the system, but beware with some AVI coded with x264/h264 if we have installed the CoreAVC codec, because, even if it lets play it, offer strange results, so better use the x264vfw codec.

I recommend the version plugin 1.3.1, that is the most stable. An html code generator, that will help us to embed the files, can be found at Divx Labs website, also we'll find a zip with a PDF guide for webmasters(SDK):

http://labs.divx.com/Webplayer/

For MP4 or FLV videos (not all MP4 work, but yes the FLV (but remember that FLV can contain H264 video)) and for the MP3 audio files, we will use the free players FLV-Player and MP3-Player, by Neolao productions for each type of files, video and audio. If we dig on their configs we will find that they are very powerful.

And, now, to show how it works (but with very basic players, you can dig to enhance them), an example ;)

I hide them to save resources, avoid load of the plugins and make the page load heavier. Saving resources, ever ;)

Updt. 09-10-26: Fixed a little visualization problem with Internet Explorer.

Updt. 11-07-03: Changed Divx Web Player video to an AVI with x264 stream.

Updt. 13-11-13: As FileDen has disappeared, and I haven't found another hotlink hosting, these samples don't work anymore. I'M SORRY.

Mostrar Divx - Ocultar Divx

Mostrar MP4/FLV - Ocultar MP4/FLV (se notará ralentización debido a la falta de aceleración por hardware)