Image

Have more questions? Submit a request

signageOS SMIL Player supports multimedia objects, including videos, images, streams, video inputs, HTML5 widgets and HTML5 websites.

Basic usage of still Image

A simple image played for defined duration.

<img src="ad2.jpg" dur="5s" fit="fill" />

The dur attribute specifies a duration of the still image during playback. The valid value is either with or without seconds - dur="10" dur="10s". Decimals are not allowed (e.g. dur="10.45s").

 

The fit attribute defines how to position image within the region. Options are:

Fill option Description
fill Default option
Shrink or stretch the content to completely fill the area (without preserving aspect ratio)
meet Scale the content while preserving aspect ratio until one of the dimensions meets the that of the area
Similar to css property object-fit: contain
meetBest Not implemented, behaves the same as meet
cover Image is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
Similar to css property object-fit: cover
z-index In case you need to overlap images, you can assing z-index to it.
Similar to html property z-index="5"

Images transitions

Smil player offers an option to create a crossfade transition between two images. Currently, only crossfade transition is supported and it is supported only between two images. If there is a widget or video after image in the playlist, the transition will not be displayed.

Definition

Transition definition is placed inside <layout> tag in SMIL file <head>

  • The xml:id or transitionName is the ID of the transition used later in the playlist
  • type defines the behavior of the transition. Only fade is currently supported
  • subtype visualization of the transition. Only crossfade is currently supported
  • dur duration of the transition ( How long it will take to transition from one image to another). Specified in seconds, supports decimal values ( 0.6s )
<layout>
    <!-- Transition definition -->
    <transition transitionName="bwt" type="fade" subtype="crossfade" dur="1s" />

    <!-- Standard layout definition -->
    <root-layout backgroundColor="#000000" height="1080" width="1920" />
    <region regionName="video" left="10" top="10" width="1280" height="720"> </region>
</layout>

<!-- later when you want to use the transition on the image element -->
<img src="image.jpg" region="main" dur="6s" transIn="bwt">
Was this article helpful?
0 out of 0 found this helpful
Share