HTML5 media and data URIs

HTML5 media and data URIs

This is a great article about HTML5 and data URIs:

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:

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 + """> 

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

"<embed src=""data:application/pdf;base64," + BinaryToBase64.Base64 + """ width=""500"" height=""500"" alt=""pdf"" pluginspage="""" 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!