HTML5 media and data URIs

HTML5 media and data URIs

  
This is a great article about HTML5 and data URIs:
http://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri

With HTML5 and data URIs you can easily embed media files or even a pdf on a web page, without using third party scripts, iframes or any forge component. You can do it with just a few lines of HTML5 and integrates easily with Outsystems Platform.

Imagine you have your files stored somewhere in the server or in a network share, and want to display them on a web page. You only need to:

1. Read the binary: you can use FileSystem ou Network FilySystem for that:
http://www.outsystems.com/forge/component/68/extension-filesystem/
http://www.outsystems.com/forge/component/99/network-filesystem/

2. Convert to Base64: BinaryData extension from System Components has a function for that (BinaryToBase64)

3. Write a line of HTML5: using a text variable and the Assign widget.

4. Use an Expression widget: to inject the HTML to the screen. The "Escape Content" property must be set to "No".


To start, we can have something simples as this:

Web Screen Preparation action


Web Screen design + Expression Widget


* "HTML" is a local variable of type Text.


HTML 5 examples

Video (mp4 example)

"<video controls width=""500"" heigth=""500""> 
  <source type=""video/mp4"" src=""data:video/mp4;base64," + BinaryToBase64.Base64 + """> 
</video>"

Image (png example)
"<img src=""data:image/png;base64," + BinaryToBase64.Base64 + """  />"

PDF
"<embed src=""data:application/pdf;base64," + BinaryToBase64.Base64 + """ width=""500"" height=""500"" alt=""pdf"" pluginspage="" http://www.adobe.com/products/acrobat/readstep2.html"" type=""application/pdf"">"

This is just a simple example, the code can be improved but its a starting point :)

Awesome tip, Carlos, thanks for sharing!