Want to unleash your inner Spielberg and add cool video files to your app? We’ve got everything you need!
Depending on what you want to do, you've got two options:
- If you want your video to be immediately visible on your state: use the Video Player component
- If you want your video to be displayed only once the user performs an action: use the Video component.
1. Insert a video
To add a video, you can go:
to Medias: click on the green + ADD button to browse the content of your hard drive and select your file. Once you've inserted your component, you simply need to drag it into it.
in the Properties window of your component: click on ADD SOURCE.
All your videos are automatically encoded to ensure their optimal display on a tablet. Here is the list of accepted formats: .mp4; .avi; .wmv; .mov; .flv; .mkv; .mpg; .mpeg.
2. Using the Video Player component
The Properties window will give you access to the follow features:
Edit video player: to create markers, i.e. define specific time in your video to which you can match specific actions (see Learn about markers)
User interaction: unchecking this box means that users are unable to launch an interaction that you may have defined for or in this component.
Change source (blue button): this lets you replace your video with another one while retaining the properties you previously defined in your project. This is especially useful when you duplicate a layout.
View / Player controls: this lets you choose whether to display the Play, Pause, Forward, Backward, Full screen buttons and move the play head
Options: you can choose between automatic playing (requiring no user action) or loop mode (no end). You can also define the volume and rate of your video.
Default time: this lets you select the time displayed when loading the state (based on the predefined markers). If you do not define anything and go back to this state, it will remain at the last displayed time.
3. Using the Video component
Insert the Video component from the Components icon. It will automatically be sorted in the List of Objects, it won't be visible in your state.
Select it from the list to access the Properties window:
Edit video : lets you create markers, i.e. define specific times in your video to which you can match specific actions.
Add/Change source: this lets you replace your video with another one while retaining the properties you previously defined in your project. .
Start/End: this lets you define the start and the end of your video to create a specific track. It's measured in seconds.
Your video is treated as a separate component and you can define the action of your choice. Pick any trigger and select Define an action on a component. Select your Video component from the List of Objects. You can choose to:
- Open player
- Close player
Example: Launch a full screen video by tapping on a shape.
- Create the shape of your choice.
- Define an interactivity: make sure the shape is still selected and click on the Interactivity icon. Choose the Single tap/click trigger and associate Define action on a component. Select the Video component from the List of Objects and define an action: Open player.