• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Animation
      • Render Kit
      • Particle
      • Video
    • Maps
      • Google Maps
      • Offline Map
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Introduction
    • Google Analytics
  • Publishing
    • Introduction
    • Apple App Store Information
    • Google Play Store Information
    • Packaging the Application for Stores
    • Packaging Mac and Windows apps
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Animation
      • Render Kit
      • Particle
      • Video
    • Maps
      • Google Maps
      • Offline Map
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Introduction
    • Google Analytics
  • Publishing
    • Introduction
    • Apple App Store Information
    • Google Play Store Information
    • Packaging the Application for Stores
    • Packaging Mac and Windows apps
Components > Media Components > Video

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

NameWhen 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 SizeSets 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.
AppearanceSet the appearance of the video component.
Video filenameThe default video to pre-load.  This can be a local MP4 file or a MP4 file hosted on an HTTP server
Preview filenameThis is an image to act as a thumbnail image representing the video
Hidden filenameAdd an image file to enable video to play when it is opened.
Loop VideoIf checked the video will play in a continuous loop until the “media / stop video” action is called or the page is changed
Auto PlayIf checked the video will play automatically when this page is opened

Events that can Trigger an Action on the Video Component

On PressAction occurs when component is pressed.
On CompletionAction occurs when the video finishes.
  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home