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.

Video Splash Screen

  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