Video Splash Screen

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

Introduction

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

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

The video splash screen works in the following sequence:

1. The video playback is started 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 only after one of the below event conditions is fulfilled. You have to choose one of them for your application:

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

If the video is terminated due to one of these events, but the application is not yet fully loaded, a static splash screen will appear for the remaining loading time.

The feature works with web applications.

Video Splash Screen For Web Applications

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

Prerequisites

1. In "config.xml", add the following:

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

2. Inside this tag, you can define multiple splash screens depending on the screen orientation:

   <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 ⬇️

Table 1: Description of the 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]

Table 2: Description of the vss_default element

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]

Table 3: Description of the vss_landscape element

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]

Table 4: Description of the vss_portrait element

Example Video Splash Screens Tags

Below is an example video splash screen declaration in the "config.xml" file 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	Requirement
Video size	Maximum 2MB
Allowed video resolutions	SD, HD, FullHD, 4k
Number of videos	Only one video per orientation
Number of ready-whens	Only one ready-when for all video splash screens for web applications

Table 5: Video splash screen limitations

Static Splash Screen Specifications

The following table defines the static splash screen limitations.

Category	Requirement
Image size	Maximum 200kB
Allowed formats	Any 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

Table 6: Static splash screen limitations