Skip to main content

SMIL Standard for Digital Signage

The Foundation of Digital Signage Playlists

SMIL (Synchronized Multimedia Integration Language, pronounced "smile") is a W3C Recommendation that defines an XML-based language for describing multimedia presentations. In digital signage, SMIL serves as the industry-standard format for defining playlists, scheduling content, and synchronizing multimedia elements across displays.

What is SMIL?​

SMIL (Synchronized Multimedia Integration Language) is an open standard developed by the World Wide Web Consortium (W3C) for describing multimedia presentations. First published in 1998, SMIL enables authors to define:

  • What media elements to play (videos, images, text, audio)
  • When each element should appear (timing and scheduling)
  • Where elements are positioned (spatial layout)
  • How elements transition and interact (animations, synchronization)

Why SMIL Matters for Digital Signage​

SMIL has become the de facto standard for digital signage because it provides:

BenefitDescription
InteroperabilityContent created for one SMIL-compliant player works on others
StandardizationIndustry-wide common language for playlist definition
PrecisionFrame-accurate timing and synchronization
FlexibilitySupports complex multi-zone, multi-media layouts
Offline CapablePlaylists work without constant network connectivity
Open StandardNo proprietary lock-in, vendor-neutral

SMIL Version History​

SMIL 1.0 (June 1998)​

The first SMIL recommendation introduced basic timing, media references, and simple layout:

  • Sequential and parallel timing containers
  • Basic media objects (video, audio, image, text)
  • Simple hyperlinking
  • Region-based layout

SMIL 2.0 (August 2001)​

Major expansion with modular architecture:

  • Animation and transitions
  • Content control (switch statements)
  • Enhanced timing model
  • Prefetch and caching hints
  • Integration with other XML languages

SMIL 2.1 (December 2005)​

Refinements focused on mobile and embedded:

  • Mobile profile for devices
  • Improved XHTML integration
  • Extended linking capabilities

SMIL 3.0 (December 2008)​

Current stable recommendation with full digital signage support:

  • State management and variables
  • External timing control
  • Enhanced media accessibility
  • Improved multi-screen synchronization
  • Complete timing and synchronization model

Current Standard: SMIL 3.0 is the current W3C Recommendation and the version used by most digital signage systems. The full specification is available at w3.org/TR/SMIL3.

Core SMIL Concepts​

Document Structure​

A SMIL document is an XML file with the .smil or .smi extension. The basic structure follows this hierarchy:

<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/ns/SMIL">
  <head>
    <!-- Metadata, layout, transitions -->
    <meta name="title" content="My Playlist"/>
    <layout>
      <!-- Define screen regions -->
    </layout>
  </head>
  <body>
    <!-- Content sequence and timing -->
  </body>
</smil>

The Head Section​

The <head> element contains non-visual configuration:

<head>
  <!-- Document metadata -->
  <meta name="author" content="MediaSignage"/>
  <meta name="title" content="Retail Promotion Playlist"/>

  <!-- Screen layout definition -->
  <layout>
    <root-layout width="1920" height="1080" backgroundColor="#000000"/>

    <!-- Define display regions -->
    <region id="main" left="0" top="0" width="100%" height="80%"/>
    <region id="ticker" left="0" top="80%" width="100%" height="20%"/>
  </layout>

  <!-- Transition effects -->
  <transition id="fade" type="fade" dur="1s"/>
  <transition id="wipe" type="barWipe" dur="0.5s"/>
</head>

The Body Section​

The <body> element contains the actual media sequence:

<body>
  <seq repeatCount="indefinite">
    <!-- Play these items in sequence, repeat forever -->
    <video src="promo1.mp4" dur="30s" region="main"/>
    <img src="sale-banner.jpg" dur="10s" region="main" transIn="fade"/>
    <video src="promo2.mp4" dur="30s" region="main"/>
  </seq>
</body>

Timing Containers​

SMIL's power lies in its timing model. Three primary containers control media timing:

Sequential Container (<seq>)​

Plays children one after another in order:

<seq>
  <video src="intro.mp4" dur="15s"/>
  <img src="welcome.jpg" dur="5s"/>
  <video src="main-content.mp4" dur="60s"/>
</seq>
<!-- Total duration: 15 + 5 + 60 = 80 seconds -->

Parallel Container (<par>)​

Plays all children simultaneously:

<par>
  <video src="background-loop.mp4" region="main"/>
  <text src="news-ticker.txt" region="ticker"/>
  <audio src="ambient-music.mp3"/>
</par>
<!-- All play at the same time -->

Exclusive Container (<excl>)​

Plays one child at a time, with priority handling:

<excl>
  <par id="normal" dur="indefinite">
    <!-- Normal playlist content -->
  </par>
  <seq id="emergency" begin="emergencyTrigger">
    <!-- Emergency content interrupts normal -->
  </seq>
</excl>

Combining Containers​

Real-world playlists combine containers for complex layouts:

<body>
  <par dur="indefinite">
    <!-- Main content zone - sequential videos -->
    <seq region="main" repeatCount="indefinite">
      <video src="promo1.mp4" dur="30s"/>
      <video src="promo2.mp4" dur="30s"/>
      <video src="promo3.mp4" dur="30s"/>
    </seq>

    <!-- Ticker zone - runs parallel to main -->
    <seq region="ticker" repeatCount="indefinite">
      <text src="news1.txt" dur="10s"/>
      <text src="news2.txt" dur="10s"/>
    </seq>

    <!-- Audio - also parallel -->
    <audio src="background.mp3" repeatCount="indefinite"/>
  </par>
</body>

Timing Attributes​

Duration (dur)​

Specifies how long media plays:

<!-- Explicit duration -->
<img src="photo.jpg" dur="10s"/>

<!-- Play for media's intrinsic duration -->
<video src="clip.mp4" dur="media"/>

<!-- Play indefinitely -->
<video src="loop.mp4" dur="indefinite"/>

Begin and End​

Control when media starts and stops:

<!-- Start 5 seconds after parent begins -->
<img src="overlay.png" begin="5s" dur="10s"/>

<!-- Start when another element ends -->
<video src="next.mp4" begin="previous.end"/>

<!-- End when a specific time is reached -->
<video src="content.mp4" end="wallclock(2026-02-01T18:00:00)"/>

Repeat Control​

Define repetition behavior:

<!-- Repeat 3 times -->
<video src="ad.mp4" repeatCount="3"/>

<!-- Repeat for 5 minutes total -->
<video src="ad.mp4" repeatDur="5min"/>

<!-- Repeat forever -->
<seq repeatCount="indefinite">
  ...
</seq>

Layout and Regions​

SMIL's layout module defines where content appears on screen:

Root Layout​

Defines the overall canvas size:

<layout>
  <root-layout width="1920" height="1080" backgroundColor="#000000"/>
</layout>

Regions​

Regions are named areas where media renders:

<layout>
  <root-layout width="1920" height="1080"/>

  <!-- Full-screen main content -->
  <region id="fullscreen"
          left="0" top="0"
          width="1920" height="1080"
          z-index="0"/>

  <!-- L-shaped layout example -->
  <region id="main"
          left="0" top="0"
          width="1440" height="810"
          z-index="1"/>

  <region id="sidebar"
          left="1440" top="0"
          width="480" height="1080"
          z-index="1"/>

  <region id="ticker"
          left="0" top="810"
          width="1440" height="270"
          z-index="1"/>
</layout>

Region Attributes​

AttributeDescriptionExample
idUnique identifierid="main"
left, topPosition from originleft="100" top="50"
width, heightDimensions (px or %)width="50%" height="300"
z-indexStacking orderz-index="10"
backgroundColorBackground colorbackgroundColor="#ffffff"
fitHow media fitsfit="meet", fit="fill"

Fit Modes​

Control how media scales within regions:

<!-- Maintain aspect ratio, fit within region -->
<region id="video" fit="meet"/>

<!-- Maintain aspect ratio, fill region (may crop) -->
<region id="video" fit="slice"/>

<!-- Stretch to fill exactly (may distort) -->
<region id="video" fit="fill"/>

<!-- Show at actual size -->
<region id="video" fit="hidden"/>

Media Elements​

Video​

<video src="content.mp4"
       region="main"
       dur="30s"
       fill="freeze"/>

Image​

<img src="banner.jpg"
     region="main"
     dur="10s"
     fit="meet"/>

Audio​

<audio src="music.mp3"
       dur="media"
       repeatCount="indefinite"/>

Text​

<text src="message.txt"
      region="ticker"
      dur="15s"/>

Reference Media (ref)​

Generic media element:

<ref src="widget.html"
     region="sidebar"
     type="text/html"
     dur="indefinite"/>

Transitions and Effects​

SMIL defines transitions between media elements:

Defining Transitions​

<head>
  <transition id="fadeIn" type="fade" subtype="fadeToColor" dur="1s"/>
  <transition id="fadeOut" type="fade" subtype="fadeFromColor" dur="1s"/>
  <transition id="wipeLeft" type="barWipe" subtype="leftToRight" dur="0.5s"/>
  <transition id="dissolve" type="fade" dur="2s"/>
</head>

Applying Transitions​

<body>
  <seq>
    <img src="slide1.jpg" dur="10s" transOut="fadeOut"/>
    <img src="slide2.jpg" dur="10s" transIn="fadeIn" transOut="fadeOut"/>
    <img src="slide3.jpg" dur="10s" transIn="fadeIn"/>
  </seq>
</body>

Common Transition Types​

TypeSubtypesEffect
fadefadeToColor, fadeFromColor, crossfadeOpacity transitions
barWipeleftToRight, rightToLeft, topToBottomBar sweeps
irisWiperectangle, diamondIris opens/closes
clockWipeclockwiseTwelve, clockwiseNineClock hand motion
snakeWipetopLeftVertical, topLeftDiagonalSnake patterns
pushWipefromLeft, fromTopPush previous off

Content Control​

Switch Statement​

Select content based on conditions:

<switch>
  <!-- Check system conditions -->
  <video src="hd-content.mp4" systemScreenSize="1920x1080"/>
  <video src="sd-content.mp4" systemScreenSize="1280x720"/>
  <video src="mobile.mp4"/> <!-- Default fallback -->
</switch>

Custom Test Attributes​

For digital signage, custom attributes enable conditional playback:

<switch>
  <!-- Play based on custom conditions -->
  <seq expr="dayOfWeek == 'Monday'">
    <!-- Monday specials -->
  </seq>
  <seq expr="dayOfWeek == 'Friday'">
    <!-- Friday content -->
  </seq>
  <seq>
    <!-- Default content -->
  </seq>
</switch>

Scheduling with Wall Clock Time​

SMIL's wallclock() function enables calendar-based scheduling:

Basic Wall Clock Timing​

<!-- Start at specific date/time -->
<video src="new-year.mp4"
       begin="wallclock(2026-01-01T00:00:00)"/>

<!-- Play during business hours -->
<seq begin="wallclock(R/2026-01-01T09:00:00/P1D)"
     end="wallclock(R/2026-01-01T17:00:00/P1D)">
  <video src="store-open.mp4"/>
</seq>

Repeating Schedules​

<!-- Every day at 9 AM -->
begin="wallclock(R/2026-01-01T09:00:00/P1D)"

<!-- Every Monday at noon -->
begin="wallclock(R/2026-01-05T12:00:00/P1W)"

<!-- Every hour -->
begin="wallclock(R/2026-01-01T00:00:00/PT1H)"

Dayparting Example​

Schedule different content for different times of day:

<par dur="indefinite">
  <!-- Morning content: 6 AM - 11 AM -->
  <seq begin="wallclock(R/2026-01-01T06:00:00/P1D)"
       end="wallclock(R/2026-01-01T11:00:00/P1D)">
    <video src="breakfast-promo.mp4" repeatCount="indefinite"/>
  </seq>

  <!-- Lunch content: 11 AM - 2 PM -->
  <seq begin="wallclock(R/2026-01-01T11:00:00/P1D)"
       end="wallclock(R/2026-01-01T14:00:00/P1D)">
    <video src="lunch-special.mp4" repeatCount="indefinite"/>
  </seq>

  <!-- Afternoon content: 2 PM - 6 PM -->
  <seq begin="wallclock(R/2026-01-01T14:00:00/P1D)"
       end="wallclock(R/2026-01-01T18:00:00/P1D)">
    <video src="happy-hour.mp4" repeatCount="indefinite"/>
  </seq>

  <!-- Evening content: 6 PM - close -->
  <seq begin="wallclock(R/2026-01-01T18:00:00/P1D)"
       end="wallclock(R/2026-01-01T23:00:00/P1D)">
    <video src="dinner-promo.mp4" repeatCount="indefinite"/>
  </seq>
</par>

Prefetch and Caching​

SMIL includes provisions for content pre-loading:

<head>
  <!-- Prefetch hints -->
  <prefetch src="large-video.mp4" mediaSize="500MB"/>
  <prefetch src="next-playlist.smil"/>
</head>

<body>
  <!-- Player should have content cached when needed -->
  <video src="large-video.mp4" dur="media"/>
</body>

SMIL in Digital Signage Systems​

How CMS Platforms Use SMIL​

Modern digital signage CMS platforms use SMIL internally, even when users don't see it:

┌─────────────────────────────────────────────────────────────────┐
│                     CMS WEB INTERFACE                            │
│  User drags and drops content, sets schedules, creates layouts  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              │ CMS generates SMIL
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                      SMIL PLAYLIST                               │
│  <?xml version="1.0"?>                                          │
│  <smil>                                                          │
│    <head><layout>...</layout></head>                            │
│    <body><seq>...</seq></body>                                  │
│  </smil>                                                         │
└─────────────────────────────────────────────────────────────────┘
                              │
                              │ Downloaded to player
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     MEDIA PLAYER                                 │
│  SMIL rendering engine interprets playlist, plays content       │
└─────────────────────────────────────────────────────────────────┘

SignageStudio and SMIL​

SignageStudio generates optimized SMIL playlists behind the scenes:

  1. Visual Design: Users create layouts with drag-and-drop interface
  2. SMIL Generation: Platform automatically generates SMIL
  3. Optimization: Playlist optimized for target player capabilities
  4. Distribution: SMIL and media synced to players
  5. Playback: Player's SMIL engine renders content

This abstraction means users benefit from SMIL's power without needing to write XML.

Player Compatibility​

Major digital signage players with SMIL support:

PlayerSMIL SupportNotes
BrightSignFull SMIL 3.0Native SMIL rendering
SignageStudio PlayerFull SMIL 3.0Windows, Android, Linux, Raspberry Pi
IAdeaFull SMIL 3.0Commercial-grade players
Samsung SSPSMIL-compatibleSystem-on-Chip displays
LG webOSSMIL-compatibleSystem-on-Chip displays
Android PlayersVariesDepends on app implementation

Complete SMIL Example​

Here's a production-ready SMIL playlist for a retail digital signage deployment:

<?xml version="1.0" encoding="UTF-8"?>
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0">

  <head>
    <!-- Document metadata -->
    <meta name="title" content="Retail Store - Main Playlist"/>
    <meta name="author" content="MediaSignage"/>
    <meta name="created" content="2026-02-01"/>

    <!-- 1080p landscape layout -->
    <layout>
      <root-layout width="1920" height="1080" backgroundColor="#000000"/>

      <!-- Main content area (L-bar top/left) -->
      <region id="main"
              left="0" top="0"
              width="1440" height="810"
              z-index="1"
              fit="meet"/>

      <!-- Right sidebar for promotions -->
      <region id="sidebar"
              left="1440" top="0"
              width="480" height="810"
              z-index="1"
              fit="meet"/>

      <!-- Bottom ticker area -->
      <region id="ticker"
              left="0" top="810"
              width="1920" height="270"
              z-index="2"
              backgroundColor="#1a1a2e"/>

      <!-- Logo overlay (always visible) -->
      <region id="logo"
              left="1720" top="20"
              width="180" height="60"
              z-index="10"/>
    </layout>

    <!-- Transition definitions -->
    <transition id="fade" type="fade" dur="0.5s"/>
    <transition id="crossfade" type="fade" subtype="crossfade" dur="1s"/>
  </head>

  <body>
    <!-- Everything runs in parallel -->
    <par dur="indefinite">

      <!-- Logo always visible -->
      <img src="logo.png" region="logo" dur="indefinite"/>

      <!-- Main content rotation -->
      <seq region="main" repeatCount="indefinite">
        <video src="welcome.mp4" dur="30s" transOut="fade"/>
        <img src="sale-banner.jpg" dur="8s" transIn="fade" transOut="fade"/>
        <video src="product-demo.mp4" dur="45s" transIn="fade" transOut="fade"/>
        <img src="testimonial.jpg" dur="10s" transIn="fade" transOut="fade"/>
        <video src="brand-story.mp4" dur="60s" transIn="fade"/>
      </seq>

      <!-- Sidebar promotional content -->
      <seq region="sidebar" repeatCount="indefinite">
        <img src="promo1.jpg" dur="15s" transIn="crossfade" transOut="crossfade"/>
        <img src="promo2.jpg" dur="15s" transIn="crossfade" transOut="crossfade"/>
        <img src="promo3.jpg" dur="15s" transIn="crossfade" transOut="crossfade"/>
        <img src="social-feed.jpg" dur="15s" transIn="crossfade" transOut="crossfade"/>
      </seq>

      <!-- Ticker messages -->
      <seq region="ticker" repeatCount="indefinite">
        <text src="message1.txt" dur="8s"/>
        <text src="message2.txt" dur="8s"/>
        <text src="message3.txt" dur="8s"/>
      </seq>

      <!-- Dayparted content overlay -->
      <excl>
        <!-- Lunch special: 11 AM - 2 PM -->
        <img src="lunch-special-overlay.png"
             region="main"
             begin="wallclock(R/2026-01-01T11:00:00/P1D)"
             end="wallclock(R/2026-01-01T14:00:00/P1D)"
             z-index="5"/>

        <!-- Happy hour: 4 PM - 7 PM -->
        <img src="happy-hour-overlay.png"
             region="main"
             begin="wallclock(R/2026-01-01T16:00:00/P1D)"
             end="wallclock(R/2026-01-01T19:00:00/P1D)"
             z-index="5"/>
      </excl>

    </par>
  </body>

</smil>

SMIL Best Practices​

Performance Optimization​

  1. Use prefetch for large media files
  2. Specify explicit durations rather than relying on media intrinsic duration
  3. Limit transition complexity on low-powered players
  4. Use appropriate video codecs (H.264 for compatibility)
  5. Keep playlist files small by using relative paths

Content Organization​

  1. Use meaningful region IDs (main, ticker, logo)
  2. Group related content in containers
  3. Add metadata for playlist management
  4. Document complex timing with XML comments

Compatibility​

  1. Test on target players before deployment
  2. Use SMIL 3.0 for maximum features
  3. Provide fallback content for unsupported features
  4. Validate XML before distribution

SMIL Extensions for Digital Signage​

Many digital signage platforms extend SMIL with proprietary elements:

Common Extensions​

ExtensionPurposeExample
PriorityContent priority levelspriority="high"
CachingCache controlcacheControl="prefetch"
Proof of PlayPlayback logginglogging="true"
ConditionalCustom conditionscondition="weather.temp > 80"
WidgetsDynamic content<widget type="weather"/>
TouchInteractive triggersbegin="touch"

SignageStudio Extensions​

SignageStudio adds extensions for advanced features:

<!-- Dynamic data binding -->
<text src="data:rss://news.com/feed"
      region="ticker"
      refresh="300"/>

<!-- Weather widget -->
<ref src="widget://weather?location=nyc"
     region="sidebar"
     dur="indefinite"/>

<!-- Touch interactivity -->
<seq begin="touch.activate">
  <video src="interactive-content.mp4"/>
</seq>

Validating SMIL Documents​

XML Validation​

SMIL documents must be valid XML:

# Using xmllint
xmllint --valid playlist.smil

# Online validators
# - https://validator.w3.org/
# - https://www.xmlvalidation.com/

SMIL Schema​

The W3C provides XML Schemas for SMIL validation:

<smil xmlns="http://www.w3.org/ns/SMIL"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/ns/SMIL
                          http://www.w3.org/2008/SMIL30/SMIL30Language.xsd">

SMIL vs. Proprietary Formats​

AspectSMILProprietary Formats
StandardizationW3C RecommendationVendor-specific
PortabilityCross-platformSingle vendor
Longevity25+ years stableMay change/disappear
Learning CurveIndustry standardPer-vendor
ExtensibilityDefined extension modelVaries
Tool SupportWide ecosystemVendor tools only
DocumentationExtensive W3C docsVaries

Resources and References​

Official W3C Documentation​

Digital Signage Resources​

Frequently Asked Questions​

What does SMIL stand for in digital signage?​

SMIL stands for Synchronized Multimedia Integration Language. Pronounced "smile," it's a W3C (World Wide Web Consortium) standard that defines an XML-based language for describing multimedia presentations. In digital signage, SMIL is used to define playlists, schedules, screen layouts, and content synchronization.

Do I need to learn SMIL to use digital signage?​

No. Modern digital signage platforms like SignageStudio provide intuitive visual interfaces. You design content with drag-and-drop tools, set schedules with calendars, and the platform automatically generates optimized SMIL playlists. Understanding SMIL is only necessary for advanced customization or player-level debugging.

Is SMIL still used in modern digital signage?​

Absolutely. SMIL remains the industry standard in 2026 because:

  • Proven reliability: 25+ years of stability
  • Interoperability: Works across different players and vendors
  • Comprehensive: Handles complex multi-zone, scheduled content
  • Offline capable: No constant network required

All major professional digital signage platforms use SMIL internally.

What is the difference between SMIL and HTML5?​

AspectSMILHTML5
PurposeTimed multimedia orchestrationGeneral web content
TimingBuilt-in precise timing modelRequires JavaScript
SchedulingNative wall-clock supportCustom implementation
OfflineDesigned for offlineRequires service workers
Multi-zoneNative layout regionsCSS-based

Many systems use both: SMIL for playlist control, HTML5 for dynamic widgets within playlists.

Can SMIL handle interactive digital signage?​

Yes. SMIL 3.0 supports interaction through event-based timing:

<par>
  <video src="attract-loop.mp4" repeatCount="indefinite"/>
  <seq begin="touch.activate">
    <video src="interactive-menu.mp4"/>
  </seq>
</par>

The attract loop plays until touch triggers the interactive sequence.

Next Steps​

This guide is maintained by MediaSignage, pioneers of digital signage technology since 2008. SMIL has been at the core of our platform since our founding.

Last updated on