Video
The Video object is a core multimedia component that lets you embed full-motion video players directly inside your Custom Launcher. Whether you want to showcase high-definition trailers, display animated backgrounds, or create immersive cutscenes, the Video object provides native playback capabilities without requiring external software.
By connecting video playback to your launcher's events and actions, you can create a highly cinematic experience for your players. Videos can autoplay silently as a background ambiance, or take center stage with full user controls.
Typical Uses
- ❖ Creating dynamic, looping animated backgrounds
- ❖ Playing a studio intro splash screen on launch
- ❖ Showcasing the latest expansion trailer in the news tab
- ❖ Providing in-launcher video tutorials
Default Settings
When you drag a Video object onto the page, it initializes with sensible defaults designed to guarantee playback compatibility across most systems.
| Property | Default Value |
|---|---|
| Dimensions | Width: 320, Height: 180 (16:9 ratio) |
| Autoplay | Enabled |
| Muted | Enabled (Often required for Autoplay) |
| Controls | Enabled |
| Loop | Disabled |
| Initial Volume | 50% |
Properties
The visual editor gives you extensive control over how the video behaves when loaded.
Source
- Video URL: Provide the direct URL to an MP4 or WebM file. You can link externally or pick a file straight from your Asset Library.
Behavior
- Autoplay: Dictates whether the video starts playing immediately. Note that modern web engines usually require a video to be muted to autoplay securely.
- Show Controls: Toggles the visibility of the native player interface, including the play/pause button, timeline, and fullscreen options. Turn this off for background videos.
- Loop: If checked, the video will automatically restart from the beginning once it reaches the end. Ideal for seamless ambient backgrounds.
Audio
- Initial Volume: Sets the starting volume level from 0 to 100. (Saved internally as 0.0 to 1.0).
Video Events
Wiring logic to the Video object allows your Custom Game Launcher to react dynamically to the playback state.
onVideoEnd
This event fires the exact moment playback reaches the end of the video track. This is extremely useful for transition logic, like waiting for a studio logo animation to finish before moving the user to the main menu page.
onVideoPlay
This event fires when playback starts for the first time or resumes from a paused state. You might use this to automatically mute background launcher music to ensure audio streams do not overlap.
onVideoPause
Fires when playback is paused by the user clicking the controls, or programmatically via code. This could be used to resume your launcher's background music.
All Possible Actions for the Video Object
You can target your Video object with specific actions during runtime to change what is being played without needing multiple video objects.
| Action | How it works |
|---|---|
| Change Video | Instantly changes the source URL of the target Video object and attempts to begin playback of the new stream. Variables are fully supported for dynamic linking. |
Because the Video is a standard visual element, you can also use general canvas actions like Show Objects, Hide Objects, Move Object, and Resize Object to orchestrate complex presentation layouts.
Building Logic with the Video Object
The Video object really shines when tied into the sequence of events your users experience upon loading.
Example 1: Studio Intro Sequence
Force the user to watch a short branding animation before revealing the launcher interface.
- Place a fullscreen Video object on Page 1. Set it to Autoplay, Muted: False, Controls: False, Loop: False.
- Link your studio intro MP4 as the Source URL.
- Select the Video object and add the onVideoEnd event.
- Under this event, add a Change Page action pointing to Page 2 (your main menu). When the video concludes, the launcher automatically proceeds!
Example 2: Trailer Selector Dashboard
Allow users to preview different seasonal updates using a single player.
- Place a single Video object on your page with Controls enabled.
- Place three Buttons below it, labeling them "Season 1", "Season 2", and "Season 3".
- On the onClick event for each button, add a Change Video action.
- Point each action to the respective trailer URL. Clicking a button now recycles the same player for different content seamlessly.
Custom CSS Example
If you have access to the Developer Edition, you can use Custom CSS to drastically alter the look of the video container. Since native video elements are somewhat rigid, applying stylistic borders, box shadows, and filters can help blend the video into your UI perfectly.
Always use !important to override the engine's default inline styles. Do NOT use structural commands like width, height, position, or left/top. The visual engine handles the scaling dynamically to preserve aspect ratios!
This preview demonstrates how an idle grayscale filter and subdued glow can instantly snap into full, vibrant color when the user hovers over the player area.
/* Developer Edition Custom CSS Example for Video */
/* No manual object scoping needed */
/* Round the corners and apply a soft blue shadow */
border-radius: 12px !important;
box-shadow: 0 0 20px rgba(59,130,246,0.2) !important;
border: 2px solid rgba(59,130,246,0.3) !important;
/* Desaturate the video slightly when idle */
filter: grayscale(80%) sepia(30%) hue-rotate(180deg) !important;
/* Smooth transition for the hover state */
transition: filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
/* Bring full color and a massive glow on hover */
:hover {
filter: grayscale(0%) sepia(0%) hue-rotate(0deg) !important;
box-shadow: 0 0 40px rgba(59,130,246,0.8) !important;
border-color: rgba(59,130,246,1) !important;
}
Summary
The Video object brings life to a static interface. Whether used purely for aesthetic loops or for delivering actual content like patch overviews and cinematic story beats, treating video as a reactive element elevates your Custom Launcher far beyond basic imagery.