Video Component
The video component is designed to let you host packaged or streaming video content, inside a window, in your Project.
Before you consider the video component there are two options you should evaluate first!
1) The “Media / Play Fullscreen Video” action which will launch the default full screen video player for the appropriate device. This is often how users expect a video link to work and the user stays inside the Umajin experience.
2) The “Basic / Show Web Page” action with a streaming video service, such as youtube or vimeo. This will also automatically switch to use the native application on the system if the user has it installed. While this does take them out of Umajin on iOS and android, there is now a clear back button to return to the Umajin experience.
Next Steps
If you are ready for embedding video in your project (which will increase your project’s download size) or you have a hosting provider for streaming video, such as your own server or services offered by AWS or Azure, then the video component is very simple to use. It just has several limitations over normal Umajin components because it works as a hardware overlay. The reason for these limitations is to allow the video to be decoded using the device’s hardware and to make it fast, smooth and power efficient.
There are several actions you can use to control the video component. These are both under Media Actions and are “Media / Play Video” and “Media / Stop Video”.
To encode video correctly you need to use the MP4 video container. Then, within the MP4 container you should use the H.264 video codec and the AAC audio codec. Preferably enable streaming when encoding video, as this will allow you to host video online and still get smooth playback and quicker startup for your video.
We often use handbrake.fr to re-encode video for streaming. This requires choosing the container as MP4, checking web optimized and then selecting the normal preset before encoding. Services such as Amazon, Azure, Vimeo and Youtube will do all of this work for you, including generating multiple versions of the video for users who have different speed internet connections.
Properties for the Video Component
| Name | When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel. |
| Position and Size | Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a Video component thats size will be maintained across devices. |
| Appearance | Set the appearance of the video component. |
| Video filename | The default video to pre-load. This can be a local MP4 file or a MP4 file hosted on an HTTP server |
| Preview filename | This is an image to act as a thumbnail image representing the video |
| Hidden filename | Add an image file to enable video to play when it is opened. |
| Loop Video | If checked the video will play in a continuous loop until the “media / stop video” action is called or the page is changed |
| Auto Play | If checked the video will play automatically when this page is opened |
Events that can Trigger an Action on the Video Component
| On Press | Action occurs when component is pressed. |
| On Completion | Action occurs when the video finishes. |
