ximpel_website_top home features showcase downloads documents faq contact
Playlists in XIMPEL
Description: This tutorial describes how to create XIMPEL playlists
Overview

A playlist is built up from so-called tags. A tag is a word surrounded by the "smaller than" and "bigger than" symbols: < and >. Tags are used to define different parts of the playlist. The first tag <?xml version="1.0" encoding="utf-8"?> is used for all XML files and should always be included. The next tag is the ximpel tag. The start tag <ximpel> should always be closed with </ximpel>. Within the ximpel tags, the playlist is built up. Tags themselves can contain attributes with values. An example is the file attribute for the video tag.

The basic building blocks for playlists are subject tags. Each subject must have a unique id attribute. Furthermore, you can specify a description, scores and media clips. The description tag allows you to specify some additional information about the subject. For scores, you can define one or more score tags, with a name (optional) and a value attribute. This makes it possible to keep track of multiple score parameters. If you only need to keep track of one score, you can ignore the name attribute. Finally, the media tag contains one or more media items.

Playlist example 1: Creating a basic playlist
<?xml version="1.0" encoding="utf-8"?>
<ximpel>
  <subject id="IntroVideo">
    <description>Introduction video</description>
    <score name="people" value="0"/>
    <score name="planet" value="-1"/>
    <score name="profit" value="2"/>
    <media>
      <video file="fast1.flv"/>
    </media>
  </subject>
</ximpel>

Media items are placed within the media tags. Within XIMPEL, there are three built-in media types: video, picture and youtube. Other media types can be added by defining custom media types. The video media type has three attributes: file, leadsto and repeat. The file attribute contains the name of the video file to display. Supported video types are Flash Video (.flv) and MP4 H264-AAC videos (.mp4). Because Flash Video is the default video type, you can omit the .flv extension. For MP4 files you must always include the extension .mp4 with the filename. The leadsto attribute contains the id of a subject which you jump to after the current video has ended.

Playlist example 2: Using the file and leadsto attributes for the video media type
<?xml version="1.0" encoding="utf-8"?>
<ximpel>
  <subject id="mySubject1">
    <description>My first subject</description>
    <media>
      <video file="part1.mp4"/>
      <video file="part2.mp4" leadsto="mySubject2"/>
    </media>
  </subject>
  <subject id="mySubject2">
    <description>My second subject</description>
    <media>
      <video file="new.flv"/>
    </media>
  </subject>
</ximpel>

The repeat attribute contains a boolean value and is useful if you want to force the user to make a choice. In that case, you should define one or more overlays.

The youtube media type has five attributes: id, leadsto, start, stop and repeat. The id attribute refers to the id of the YouTube video you want to use. To get the id value of any given YouTube URL, look for the part after "v=". For instance, for the YouTube URL http://www.youtube.com/watch?v=aUAjicsqBjE, the id value is aUAjicsqBjE. The leadsto attribute contains the id of a subject which you jump to after the current YouTube video has ended. With the start and stop attributes you can optionally define when a YouTube video should start and/or stop playing. Please note that for the start time you need to take into account that you might not begin at the specified time due to seeking to keyframes within a YouTube video. Finally, the repeat attribute works in the same way as for the video media type, allowing you to loop a YouTube video until the user interacts with an overlay.

The picture media type just has one attribute: file, which is a relative path to an image.

Playlist example 3: Using the video, picture and youtube media type
<?xml version="1.0" encoding="utf-8"?>
<ximpel>
  <subject id="0">
    <description>Make a choice</description>
    <media>
      <picture file="1.png">
        <canvas>
          <overlay x="114" y="120" width="120" height="342" leadsto="1a"/>
          <overlay x="585" y="124" width="100" height="340" leadsto="1b"/>
        </canvas>
      </picture>
    </media>
  </subject>  
  <subject id="1a">
    <description>XIMPEL</description>
    <media>
      <youtube id="aUAjicsqBjE" start="10" stop="30"/>
    </media>
  </subject>  
  <subject id="1b">
    <description>Fast</description>
    <media>
      <video file="fast1.flv"/>
    </media>
  </subject>
</ximpel>

Branch questions are used to make the viewer aware that a choice must be made at a specified moment. To use a branch question in a playlist, you define branchquestion tags in a media item. Between the branchquestion tags you place a question that should be displayed. It is recommended to use branch questions in combination with the repeat attribute and overlays.

Playlist example 4: Using the repeat attribute and branch question tag
<?xml version="1.0" encoding="utf-8"?>
<ximpel>
  <subject id="myChoice">
    <description>Make a choice</description>
    <media>
      <video file="choice.mp4" repeat="true">
        <branchquestion>What are you going to do?</branchquestion>
        <canvas>
          <overlay x="500" y="100" width="200" height="200" leadsto="yesWeCan"/>
          <overlay x="490" y="390" width="210" height="100" leadsto="noImpossible"/>
        </canvas>
      </video>
    </media>
  </subject>
  <subject id="yesWeCan">
    <description>Yes we can!</description>
    <media>
      <video file="yes.mp4"/>
    </media>
  </subject>
  <subject id="noImpossible">
    <description>No, it is impossible</description>
    <media>
      <video file="no.flv"/>
    </media>
  </subject>
</ximpel>

Quiz questions are transitory questions that are shown at the bottom right, which are either true or false and can be used to quickly test the user. Quiz questions are defined in pairs of question and rightanswer tags. Between the question tags you specify the question and between the rightanswer tag you specify a Boolean value true or false that indicates the correct answer. The question tag has two additional optional attributes: starttime and duration. The starttime attribute specifies the time in seconds when the quiz question should be shown and the duration attribute specifies how many seconds the quiz question should be shown.

Playlist example 5: Using the question tag
<?xml version="1.0" encoding="utf-8"?>
<ximpel>
  <subject id="mySubject">
    <description>My subject</description>
    <media>
      <video file="myvideo.flv">
        <question starttime="1" duration="5">This is the first question</question>
        <rightanswer>true</rightanswer>
        <question starttime="10" duration="5">This is the third question</question>
        <rightanswer>false</rightanswer>
      </video>
    </media>
  </subject>
</ximpel>

Normally, the media items specified between media tags in a subject are played in the order in which they are defined. It is possible to randomize the playback order of the items by defining the order attribute for the media tag. The order attribute can contain the following values:

  • default: play all items in the order in which they are defined.
  • random: play all items in a random order.
  • randomN: pick N items and play them in a random order.

Playlist example 6: Using the order attribute
<?xml version="1.0" encoding="utf-8"?>
<ximpel>
  <subject id="randomVideos">
    <description>Random videos</description>
    <media order="random">
      <video file="1.flv"/>
      <video file="2.flv"/>
      <video file="3.flv" leadsto="randomVideos2"/>
    </media>
  </subject>
  <subject id="randomVideos2">
    <description>Random videos pt.2</description>
    <media order="random2">
      <video file="4.flv"/>
      <video file="5.flv"/>
      <video file="6.flv" leadsto="randomVideos"/>
      <video file="7.flv"/>
    </media>
  </subject>
</ximpel>

Subjects can be linked in three ways:

  • Using overlays. Overlays appear as visual elements onscreen and you only go to another subject by clicking on them.
  • Using the media item leadsto attribute. When the current media clip has ended, you jump to the specified subject.
  • Using the subject leadsto attribute. When all the media clips of the current subject have been played, you jump to the specified subject.

Playlist example 7: Linking subjects
<?xml version="1.0" encoding="utf-8"?>
<ximpel>
  <subject id="overlayJump">
    <description>Jump by overlay</description>
    <media>
      <video file="jump1.flv" repeat="true">
        <branchquestion>Choose your jump</branchquestion>
        <canvas>
          <overlay x="0" y="0" width="300" height="600" leadsto="mediaItemJump"/>
          <overlay x="500" y="0" width="300" height="600" leadsto="subjectJump"/>
        </canvas>
      </video>
    </media>
  </subject>
  <subject id="mediaItemJump">
    <description>Jump by media item leadsto attribute</description>
    <media>
      <video file="jump2.flv" leadsto="overlayJump"/>
    </media>
  </subject>
  <subject id="subjectJump" leadsto="overlayJump">
    <description>Jump by subject leadsto attribute</description>
    <media>
      <video file="jump3-1.mp4"/>
      <video file="jump3-2.mp4"/>
    </media>
  </subject>
</ximpel>

XIMPEL has three built-in media types:

  • Flash video, with tag <video>
  • YouTube, with tag <youtube>
  • Picture, with tag <picture>

Playlist example 8: Built-in media types
<ximpel>
  <subject id="0">
    <description>XIMPEL</description>
    <media>
      <picture file="logo.png">
        <canvas>
          <overlay x="200" y="250" width="50" height="100" leadsto="1a"/>
          <overlay x="550" y="250" width="50" height="100" leadsto="1b"/>
        </canvas>
      </picture>
    </media>
  </subject>  
  <subject id="1a">
    <description>XIMPEL</description>
    <media>
      <youtube id="aUAjicsqBjE"/>
    </media>
  </subject>  
  <subject id="1b">
    <description>Fast</description>
    <media>
      <video file="fast1.flv"/>
    </media>
  </subject>
</ximpel>