Reference Guide

Media

The Media component allows you to add video or audio content to a screen. Video or audio content must be hosted on a web server, and must be in one of the following formats:

• MP4
• WebM
• MP3

Playback controls will appear automatically when you preview your app

To add video/audio to your screen, simply drag the Media component from the tool bar on to your screen, and position it where you want it. If you choose to insert audio rather than video, an audio player will be displayed when your app is run.

Media files are streamed at runtime, so a placeholder is all you’ll see on the Canvas

Media components are just a placeholder to begin with – a box in which a video or audio file will be played when the app runs. When you first drag the component onto the screen, you’ll see an icon that indicates that a source hasn’t been set yet.

Setting a Media Source

To play back the video/audio file when the app runs, you’ll need to tell Nutshell where it can find the video/audio file. Select your Media component on the Canvas and go to the Properties panel; there you’ll find a Video/Audio URL field.

Source files for the media component are supplied as URLs in the Properties Panel

Type in the URL of the video/audio file into this box. Video/audio files must be hosted on a publicly-accessible web server.

Inserting a Video/Audio File Dynamically

You can set the Video/Audio URL dynamically from a data-source. What do we mean by dynamically? Dynamic data is content that changes based on something your end-user does.

For example, imagine that part of your app workflow is to capture a video on the end-user’s mobile phone, save it in a database, and then watch it again later. In this example, the video file is dynamic as it changes to whatever was stored in the database.

Media files are inserted dynamically from a Data component, where URLs are pulled from the Database and ‘mapped’ to a Media component using its unique reference. More information about the Data componentGo to Data - Data Component and the mapping process can be found elsewhere in this Reference Guide.

Resizing a Media Component

To resize a Media component, click and drag on a corner of its bounding box. Most videos these days are recorded in a 16:9 aspect ratio.

Media Properties

When a Media component is selected on the Canvas, the following settings are available in the Properties panel: