1. GDSA
  2. Garlic Player
  3. Docs
  4. SMIL: The Essentials
  5. Media Objects

Media Objects

SMIL supports six media objects

  1. Images
  2. Colors
  3. Videos
  4. Audio
  5. Websites/Text
  6. HTML-Widgets

Images

The syntax for inserting an image in your presentation is: 
<img src="path/to/image.jpg" dur="5s" />
Image media object

The dur attribute specifies the duration of the image during playback. If you do not specify an explicit duration, the image will not show, as this media type has no intrinsic duration like videos or audio files.

Supported image formats are: SVG, JPG, GIF, and PNG

Colors

The SMIL instruction to display a color in screen is: 
<brush color="green" dur="10s"/>
<brush color="#f0f" dur="10s"/>
Color media object with 10s duration

Brush colors follow the same duration rules like images, as they do not have an intrinsic duration. The attribute color can include hex-codes or the same color names like HTML.

Videos

The video instruction is: 
<video src="path/to/video.mkv" soundLevel="20%" />
Video media object with intrinsic duration

The attribute soundLevel control the volume of this video element.

As you see, we have no dur attribute, as a video has an intrinsic duration. Of course, It is possible to add a duration. 

<video src="path/to/video.mkv" dur="5s" />
Video media object with duration

An applied duration overrides the intrinsic duration. In this case, the videos ends after 5s, no matter how long or short it is.

Supported formats depending on the implementation. Many players use FFmpeg, VLC-lib or operating system dependent media-libs as sound and video backend. So, there are any formats possible the multimedia-lib supports.

Audio

The SMIL instruction for an audio-file is: 
<audio src="path/to/audio.mkv" soundLevel="40%" dur="2min"/>
Audio media object with 2 min

The same rules apply to audio files as to video files. In this case, audio element will have a duration of 2 minutes.

Websites

The instruction to show websites are: 
<text src="https://domain.tld/index.html" dur="indefinite" />
Website media object displayed for an indefinite duration

The media files referenced from the HTML document is external and not cached in the media player. If a network is not available, the referenced media files will not display. To make the complete HTML document cached in the player and available to play when the network is not available, use HTML5 Widgets as described below.

With the same syntax, you can also include local and remote text.

HTML-Support in old IAdea player

For SMIL players that support HTML content or Widgets, such as the IAdea XMP-3250/3350/3450 Media Appliances, you may use the text and ref elements to designate the content to play. To enable HTML rendering, you must activate the corresponding system component from the SMIL's body declaration, such as the following: 

<body systemComponent="http://www.w3.org/1999/xhtml" />

The garlic-player do not need this body-declaration.

HTML-Widgets

Including HTML widget: 
<ref src="http://server/content.wgt" type="application/widget" dur="indefinite"/>
HTML Widgets

An HTML Widget is a zipped HTML file system tree containing at the top level the file named “index.html” which can refer to other files using relative URLs within the zipped tree. A widget is loaded into a player as a self-contained media file, and is cached in the player's storage for offline playback. It can be accessed using the following code:

Widgets are very elegant solution to include interactive kiosk systems, sensors, and every kind of addition app like social media, client call systems for queue management etc. Learn more about digital signage widgets.

Media Attributes

SMIL supports numerous attributes. In this starter tutorial, soundLevel, dur, and fit are relevant for media objects. In a later lesson, you will learn about begin and end trigger.

Fit

The attribute fit controls the scale of images and videos (if player supports it) with these values:

  • hidden: Often the default value. The media is displayed in their intrinsic dimension.
  • fill: Scales the media height and width, ignoring any aspect ratio. The content touches all edges of the screen zone.
  • meet: Scale the media height and width proportional. The content scales until it fits in at least one dimension of the screen zone. There is no clipping. An image will display complete.
  • meetBest: The same as meet, but it will not scale greater than the media dimensions. For example: an image with 800×600px resolution in a 1920×1080px zone will not get larger than 800×600px.
  • slice: Scale the media until if fits the screen zone, while some media areas can be clipped.

Sound Volume

The attribute soundLevel control applies to audio and video media only. Valid values for soundLevel are from 0% to 100%.

Duration

The dur attribute can be applied to every media and container. It is superseded over their intrinsic duration. The following values are possible.

  • media: The intrinsic duration.
  • indefinite: Indefinite in this context means endless.
  • Clock value: ms, s, min, h, etc. Look at SMIL's standards description of clock value syntax.

You can study a simple SMIL file for testing here.