Documents/Tutorials – Video Layer Introduction

Video layer release the power of media content. With multiple layer solution, you could mixed video with image in one page, which makes your App looks more colorful.

Watch the highlight video first:

XML DEFINITION FOR VIDEO LAYER TAGS

<layer>

<type>video</type><!– TYPE DEFINITION–>

<src>video_1.mp4</src><!–VIDEO FILE NAME,supproted format .mov, .mp4, .mpv, and .3gp–>

<x>40</x><!–position x for video in one page–>

<y>290</y><!–position y for video in one page–>

<width>480</width><!–video width–>

<height>270</height><!–video height–>

<autoplay>0</autoplay><!–wether auto play when page loaded–>

<ratiomode>1</ratiomode><!–0:size fill,1:keep reatio when scale–>

<loop>1</loop><!–play video in loop–>

<style>0</style><!–0:simple style 1:embed video player style 2:fullscreen video player style–>

</layer>

Usage 1 - Fit Screen Video

And if you want to let the video keep fit with the screen size, you could omit the width and height property.

Fit Screen function highlight video:

Be sure you set global align mode to g and auto_screen_fit to 1 first.

<align>g</align>

<auto_screen_fit>1</auto_screen_fit>

The page contains the video could be like this:

<page>

<page_prop>

<!–optional parameter: the individual set for the page’s own zoom property–>

<single_page_zoom_min>1</single_page_zoom_min>

<single_page_zoom_max>1</single_page_zoom_max>

</page_prop>

<layer>

<type>video</type>

<src>video_1.mp4</src>

<x>0</x>

<y>0</y>

<autoplay>0</autoplay>

<ratiomode>1</ratiomode>

<loop>1</loop>

<style>0</style>

</layer>

</page>

The default demo in Dolphin App Template Package is just the fit screen one, you could run and check it.

Usage 2 - Multiple Layer Video

You can use a single video layer mixed with multiple image layer, for example: a background image with a video on front of it:

<layer>

<type>img</type>

<src>desc_layer.jpg</src>

<x>0</x>

<y>0</y>

<width>1024</width>

<height>768</height>

<ratiomode>1</ratiomode>

</layer>

<layer>

<type>video</type>

<src>video_1.mp4</src>

<x>40</x>

<y>290</y>

<width>480</width>

<height>270</height>

<autoplay>0</autoplay>

<ratiomode>1</ratiomode>

<loop>1</loop>

<style>0</style>

</layer>

multiple video layer demo could be set in DolphinViewController.m, just like change other XML file path, set it like:

[mediaBook initBook:@"multiple_layer_demo.xml"];

 

Attention

For the hardware limitation of iPhone/iPad, you could only use one video in one page. The video’s original size should be limited to 640 x 480 at 30 fps.

Check more details about video restriction from Apple