Skip to content

HTML5 Media Containers

  • HTML5 content is stored as a ZIP file with an index.html file in its root.
content.zip/
    index.html
    images/
        pic1.png
        pic2.png
    css/
        index.css
    …

  • Broox Media Player tries to load index.html as the root DOCUMENT object.

  • All included files should be referenced relative to index.html. e.g.

…
<img src="./images/pic1.png" alt="pic1 in local images folder"></img>
…

Javascript

The HTML5 content can execute javascript just like chromium to perform interaction tasks. Standard browser tasks are available.

Apart from that, the media player imports the broox namespace, offering helper methods for: - Subscription to MQTT messages. - Reception of OSC/TUIO messages. - Storage of key-value objects that persist between versions of the content.

See the Broox Library for support of this features and more.

React Apps

React can be used to create interactive HTML5 assets. Be sure to use HashRouter as the router object.

Video inside HTML

  • Accepted formats are .mp4 and .webm (preferred).
  • WEBM supports video transparency.

Converting video to webm

Use ffmpeg from the command line:

ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 31 output.webm

Embedding an existing webpage in an IFRAME

An existing webpage can be embedded in a MP canvas.

  • Create a single zip file containing a index.html file with an IFRAME pointing to the webpage URL.
  • Be sure to set overflow:hidden in the BODY object if you want to avoid scrollbars appearing along the canvas.
my_webpage.zip\
    index.html

As an example:

<HTML>
    <HEAD>
    </HEAD>
    <BODY STYLE="overflow: hidden;">
        <IFRAME SRC="https://my.webpage.com/interactive.html" STYLE="width: 100%; height: 100%; overflow:hidden;" scrolling="no"></IFRAME>
        </SCRIPT>
    </BODY>
</HTML>