The Video control adds a video to a Coach.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

The Video control can be bound to a string variable.

This control is most commonly used when wanting to add a visual aspect to Coaches with a video, for example a how-to video.


Width Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed

Height Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed

Poster Image sets the poster for the video


Video Source Type MP4, WEBM, FLV

Auto-Preload sets whether or not to automatically pre-load the video

Auto-Play sets whether autoplay is enabled or not

How to Add Files to Managed Files

This is the process to add the video and optional poster image.

1.  Click the plus (+) sign next to 'Files' and select 'Web File'


2.  Click 'Browse' and select desired file, once done you should see the file in the Web File list


In order to use Web Files for the Video control, create two String variables, one for the video source and one for the poster image.

Then, select 'Has Default' for both src and poster.

In the 'Has Default' section, enter the following:

tw.system.model.findManagedFilebyPath("Web File", TWManagedFile.Types.Web).url

Video URL Source (small.mp4 is the video source):

Video Poster Source (after.png is the poster image):

Bind the src string to the Video Control, and the poster string to the Poster Image configuration option.

 These are the configuration option settings...

This is the result...

The poster image is displayed on top of the video (having a poster is optional), once the play button is clicked the poster will no longer be visible while the video plays.


With the Video control, there is 1 type of event handler:

  • On Load When the page loads

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.


For detailed information on the available methods for this control, access the JS Doc file.

Related Article(s)

 Using Video with BPM File Uploader & BPM File List


  • Author: Elliot Pytosky
  • Date Created: June 8, 2015
  • Date Modified: June 18, 2015
Was this article helpful?
0 out of 0 found this helpful