Is it possible use image, audio and video files from Dropbox cloud drive ?

[jsmoraes]

I always was concerned if I am using too much space of Nabble server with my forum, an Astronomy forum with many images.

So, I was searching for an way to use files from my Dropbox and Google cloud drive. And I found the code to access and show/play those files.

The advantage is that we can show images and/or play sound and video with large scale or large file size without overcharge the Nabble server.

Image files:

Dropbox give you a link to shared file. For example: https://www.dropbox.com/s/5t7xh0minrpac2w/Pluto04_NewHorizons_1042.jpg?dl=0

To use it we must change the parameter dl=0 to dl=1 and apply in tag IMG. We don't need to check the box of message is in HTML format.

Example with reduction of image size to 320 pixels:

<img src="https://www.dropbox.com/s/5t7xh0minrpac2w/Pluto04_NewHorizons_1042.jpg?dl=1"  width="320" style="border:0px">

If you don't use the parameter width, the image will be showed with original size.

If you want the image as link to Dropbox, where the image can be seen with original size and option of zoom, use the code:

<a href="https://www.dropbox.com/s/5t7xh0minrpac2w/Pluto04_NewHorizons_1042.jpg?dl=0" target="_blank">
<img src="https://www.dropbox.com/s/5t7xh0minrpac2w/Pluto04_NewHorizons_1042.jpg?dl=1" width="180">
</a>

Attention: note that for link to Dropbox the dl parameter must be dl=0. Parameter dl=1 means dowload the file. It will open an window to download the image

Video files:

Attention: The box message is in HTML format must be checked.

New Edition:

We can work without HTML format if we embed the code by Embed button. Code example:

<nabble_embed><video controls  width="426" height="240">
      <source src="https://www.dropbox.com/s/rx4vazzh4sqkglx/videotst.webm?dl=1" >
</video></nabble_embed>

<nabble_embed><audio controls >
      <source src="https://www.dropbox.com/s/6a133b162ln74i9/OA-bemvindo.ogg?dl=1" >
</audio></nabble_embed>

The same above: the parameter dl=0 must to be changed to dl=1.

But here we have problems with the type of video file.

Opera, Chrome, Firefox work with webm type. And the code would be:

<video controls  width="426" height="240">
      <source src="https://www.dropbox.com/s/rx4vazzh4sqkglx/videotst.webm?dl=1" >
</video>

Internet Explorer form Microsoft doesn't work with webm. It works with mp4 type. I read a text that says that the code below will work with all browser. I didn't test it. I don't use Internet Explorer from Microsoft. URL/video.mp4 would be the link from Dropbox (remember to change the dl parameter).

<video controls  width="426" height="240">
  <source src="URL/video.mp4" type="video/mp4">
  <source src="URL/video.webm" type="video/webm">
</video>

Example of video for webm compatible browser (this video file hasn't sound, the button full screen and mute sound of the control works, try it):

Audio files:

The same for Video files for dl parameter and checkbox message in HTML format.

The most compatible type of file for browser is the ogg.

<audio controls >
      <source src="https://www.dropbox.com/s/6a133b162ln74i9/OA-bemvindo.ogg?dl=1" />
</audio>

For Video and Audio if the tag has autoplay the midia will start when the page is open.

<audio controls autoplay>
...

If the parameter controls isn't used the control of the midia will be hide. And with the autoplay the midia will start when the page is open.

<audio autoplay>
...

You can use the link to convert online your files to ogg or webm. As any other format.

http://www.online-convert.com/

Well, now we can let the Nabble server more light !