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.
Appearance
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
Behavior
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
Example
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.
Events
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.
Methods
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
Comments