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 the following types of applications:

• web application
• native applications
• hybrid applications
• .NET 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 For Native, Hybrid And .NET Applications

This topic describes how to add video splash screen to a native, hybrid and .NET application.

Prerequisites

1. In tizen-manifest.xml add tag:

   <splash-screens>
   ...
   </splash-screens>
   

2. Add communication between the application and video splash screen port.
   
   A. Import aul_app_com_create from aul library to your application (the path is /usr/lib/libaul-extension.so.0). Example code in C#:

   private const string AulLib = "/usr/lib/libaul-extension.so.0";
   public delegate int app_com_cb(byte* endpoint, int result, ref bundle_t enevelope, IntPtr userdata);
   
   [StructLayout(LayoutKind.Sequential)]
   public struct aul_app_com_connection_s
   {
       public byte* endpoint;
       public app_com_cb callback;
       public IntPtr user_data;
   }
   
   [StructLayout(LayoutKind.Sequential)]
   public struct bundle_t
   {
       public IntPtr kv_head;
   }
   
   [DllImport(AulLib, EntryPoint = "aul_app_com_create")]
   public static extern int aul_app_com_create(byte* endpoint, IntPtr permission, IntPtr callback, IntPtr user_data, ref IntPtr connection);
   ...
   

   B. Create a message received callback. Example code in C#:

   private DllImports.app_com_cb callback;
   private IntPtr connection;
   
   public unsafe int MessageReceived_Callback(byte* endpoint, int result, ref DllImports.bundle_t enevelope,
       IntPtr userdata)
   {
       ShowMenu(true);
       return 0;
   }
   ...
   

3. Create a message port for video splash screen communication before starting to load the application. The name of the port is created by pattern: "crosswalk.splashscreen.player." + appid, where appid is tv application's id. Example code in C#:

   callback = MessageReceived_Callback;
   DllImports.Create();
   fixed (byte* p = ResourceLoader.GetBytes("crosswalk.splashscreen.player.JuvoPlayerOpenGLNative.Tizen.TV"))
   {
       DllImports.aul_app_com_connection_s con = new DllImports.aul_app_com_connection_s();
       connection = Marshal.AllocHGlobal(Marshal.SizeOf(con));
       DllImports.aul_app_com_create(p, IntPtr.Zero, Marshal.GetFunctionPointerForDelegate(callback),
           IntPtr.Zero, ref connection);
   }
   ...
   

Defining Tv Splash Screens

The following table lists the structure and parameters for splash-screens tag.

Element	<splash-screens />
Description	This element is used to indicate the splash screen
Context	Child of the element
Occurance	0 or 1
Attributes	-
Child element	⬇️

Sctructure of splash-screens

Element	<tv-splash-screen />
Description	This element is used to indicate the default of the splash screen
Attributes	⬇️
	dpi (optional, string)
	indicatordisplay (optional, string)
	orientation ((mandatory, string) [Splash screen's orientation: landscape or portrait]
	color_depth ((mandatory, string) [Specifies ready_when event (allowed values: first-paint, complete, custom, video-finished)]
	src (mandatory, string) [A path to the video, relative to application's main directory, video requirements can be found here]
	type (mandatory, string) [Write "video" to use Video Splash Screen]
	operation (optional, string)

Sctructure of tv-splash-screen

Example Splash Screens Tags

Below is the example video splash screen declaration in tizen-manifest.xml of a native application.

<splash-screens>
    <tv-splash-screen dpi="hdpi" indicatordisplay="true" color_depth="video-finished" orientation="portrait" src="test_video_portrait.mp4" type="video" />
    <tv-splash-screen dpi="hdpi" indicatordisplay="true" color_depth="video-finished" orientation="landscape" src="test_video.mp4" type="video" />
</splash-screens>

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; Different orientations can have different ready-whens for the other 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