What Does endsync Do in SMIL?

The endsync attribute in Synchronized Multimedia Integration Language (SMIL) controls when a parallel time container (<par>) ends its active duration relative to the lifespans of its child elements. By setting endsync to first, last, or all, developers determine whether a composite multimedia presentation cuts short as soon as the earliest track finishes, waits for a specific element to conclude, or continues until every track has naturally completed.

The Role of endsync in SMIL

In SMIL, the <par> container plays multiple media elements—such as video, audio, text, and animations—simultaneously. Because each child element often has a different duration, the container needs a rule to determine when to conclude playback.

The endsync attribute specifies the synchronization condition that dictates the end of the <par> container. The three core values—first, last, and all—handle child lifespans differently.

endsync="first"

When endsync is set to first, the <par> container ends its playback as soon as the first child element reaches the end of its active duration.

• Behavior: Any remaining child elements that have not finished playing are immediately cut off and terminated.
• Common Use Case: Ideal for scenarios where a primary shorter element (such as a brief voiceover or short animation) dictates the entire scene length, preventing background music or ambient loops from continuing alone.

<par endsync="first">
  <!-- Plays for 5 seconds; container ends here, cutting the video short -->
  <audio src="short_audio.mp3" dur="5s" />
  <video src="long_video.mp4" dur="20s" />
</par>

endsync="last"

When endsync is set to last, the <par> container ends when the last scheduled child element with an explicit duration finishes its active duration.

• Behavior: It looks specifically at the children that have a resolved or scheduled end. If the container contains children with indefinite durations (such as continuous animations or streams without a fixed end), endsync="last" ignores those indefinite elements and waits only for the last deterministic child to end.
• Common Use Case: Useful when combining fixed-length media (like a 15-second audio track) with indefinite background loops, ensuring the container ends naturally when the main content finishes without waiting forever.

<par endsync="last">
  <!-- Container ends at 15 seconds, ignoring the indefinite loop -->
  <audio src="speech.mp3" dur="15s" />
  <img src="background_animation.svg" dur="indefinite" />
</par>

endsync="all"

When endsync is set to all (which is often the default behavior for <par> containers), the container waits until every single child element has completed its active duration.

• Behavior: The container will not terminate until all children—including those with unresolved or indefinite durations—have ended. If any single child element has dur="indefinite" and is never stopped by an event, the <par> container will never end.
• Common Use Case: Standard presentations where every piece of media must run its full, natural course before transitioning to the next sequence.

<par endsync="all">
  <!-- Container waits until the full 30 seconds elapse -->
  <audio src="background.mp3" dur="30s" />
  <video src="presentation.mp4" dur="20s" />
  <text src="captions.html" dur="10s" />
</par>

Summary Comparison