Video Splash Screen

This topic describes what is Video Splash Screen and how you can use it.

Introduction

This topic describes what is Video Splash Screen and how you can use it.

Video Splash Screen displays a short video while the application is loading and a static splash screen after the video is finished if the application is not loaded yet or no file for video splash screen was provided.

Separate video splash screen can be used for landscape and portrait oriented screens.

1. A video is displayed and the application begins to load in the background.
2. The video terminates if a condition, specified by a ready-when event, is fulfilled.
3. The static splash screen is hidden on an application load.
4. The application is shown on the screen.

The video terminates after one of the below events and only those events. You have to choose one of them for your application:

• video-finished - the application will be shown if and only if the video has completed playing
• first paint - the application will be shown right after first paint becomes available
• complete- the application will be shown when it has finished loading
• custom - the application will be shown when window.screen.show() method is called

If during these events the video will be terminated but the application isn't fully loaded a static splash screen will appear for the remaining time.

The feature works with web applications.

Video Splash Screen For Web Applications

This topic describes how to add video splash screen to a web application.

Prerequisites

1. In config.xml add tag:

   <tizen:video_splash_screen ready_when="video-finished">
   ...
   </tizen:video_splash_screen>
   

2. Inside this tag you can define splash screens depending on their orientations:

   <tizen:vss_default ../>
   <tizen:vss_landscape .../>
   <tizen:vss_portrait .../>
   

Defining Video Splash Screens

The table below shows the description of each tag and its attributes.

Element	<tizen:video_splash_screen/>
Description	This element is used to indicate the splash screen
Context	Child of the element
Occurance	0 or 1
Attributes	ready_when (mandatory, string, values: first-paint, complete, custom, video-finished)
child elements	see below ⬇️

Description of video_splash_screen element

Video Splash Screen child elements

Element	<tizen:vss_default>
Description	This element is used to indicate the default of the splash screen
Occurance	1
Attributes	⬇️
	video (mandatory, string) [A path to the video, relative to application's main directory, video requirements can be found here]
	background_image (mandatory, string) [A path to static splash screen's background image, relative to application's main directory, image requirements can be found in section Video Splash Screen Specifications]
	background_color (mandatory, string) [A static splash screen background's color written as hexadecimal code]
	image (mandatory, string) [A path to static splash screen's image, displayed over background_image, relative to application's main directory, image requirements can be found in section Static Splash Screen Specifications]
	image_border (mandatory, string) [A static splash screen image's border; one, two or four sizes in px (top, right, bottom, left) followed by border option: repeat, stretch or round]

Descrition of vss_default

Element	<tizen:vss_landscape>
Description	This element is used to indicate the landscape of the splash screen
Occurance	0 or 1
Attributes	⬇️
	video (optional, string) [A path to the video, relative to application's main directory, video requirements can be found in section Video Splash Screen Specifications]
	background_image (mandatory, string) [A path to static splash screen's background image; relative to application's main directory; image requirements can be found in section Static Splash Screen Specifications]
	background_color (mandatory, string) [A static splash screen background's color written as hexadecimal code]
	image (mandatory, string) [A path to static splash screen's image, displayed over background_image; relative to application's main directory; image requirements can be found here]
	image_border (mandatory, string) [A static splash screen image's border; one, two or four sizes in px (top, right, bottom, left) followed by border option: repeat, stretch or round]

Descrition of vss_landscape

Element	<tizen:vss_portrait>
Description	This element is used to indicate the portrait of the splash screen
Occurance	0 or 1
Attributes	⬇️
	video (optional, string) [A path to the video, relative to application's main directory, video requirements can be found in section Video Splash Screen Specifications]
	background_image (mandatory, string) [A path to static splash screen's background image, relative to application's main directory, image requirements can be found in section Static Splash Screen Specifications]
	background_color (mandatory, string) [A static splash screen background's color written as hexadecimal code]
	image (mandatory, string) [A path to static splash screen's image, displayed over background_image, relative to application's main directory, image requirements can be found here]
	image_border (mandatory, string) [A static splash screen image's border; one, two or four sizes in px (top, right, bottom, left) followed by border option: repeat, stretch or round]

Descrition of vss_portrait

Example Video Splash Screens Tags

Below is the example video splash screen declaration in config.xml of a web application.

<tizen:video_splash_screen ready_when="complete">
    <tizen:vss_default video="res/test_video.mp4" background_image="background.png"
        background_color="#cbe0f2" image="Samsung.png" image_border="0px stretch"/>
    <tizen:vss_portrait video="res/test_video_portrait.mp4" background_image="background.png"
        background_color="#cbe0f2" image="Samsung.png" image_border="0px stretch"/>
    <tizen:vss_landscape video="res/test_video_landscape.mp4" background_image="background.png"
        background_color="#cbe0f2" image="Samsung.png" image_border="0px stretch"/> 
</tizen:video_splash_screen>

Video Splash Screen Specifications

The following table defines the video splash screen limitations.

Category	Requirment
Video size	Maximum 2MB
Allowed video resolutions	SD, HD, FullHD, 4k
Number of videos	Only one video per oreintation
Number of ready-whens	Only one ready-when for all video splash screens for web applications;

Video splash screen limitations

Static Splash Screen Specifications

The following table defines the static splash screen limitations.

Category	Requirment
Image size	Maximum 200kB
Allowed formats	Ay correct image format supported on TV
Allowed aspect ratios	Any aspect ratio
Number of attributes	Only one background_image, image, background_color and image_border per orientation

Static splash screen limitations