ximpel_website_top home features showcase downloads documents faq contact
Custom media types
Description: Custom media types provide the possibility to add user defined media types to XIMPEL. This tutorial explains how to add support for a custom media type to XIMPEL.
Overview

Custom media types make it possible to use media types other than video within XIMPEL. Adding custom media types to XIMPEL can be realized in three steps, which will be explained in this tutorial.

To program a custom media type for XIMPEL you need to create a class that implements the IMediaType interface. In this tutorial, we will create a custom media type Picture, which displays an image. The Picture class could look as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="net.ximpel.media.IMediaType">
	<mx:Script>
		<![CDATA[
		
			public function get typeName():String {
				return "picture";
			}
		
			public function playMedia(mediaData:XML):Boolean {
				var imageURL:String = String(mediaData.@file);
				if (imageURL) {
					myImage.source = imageURL;
					return true;
				}else {
					return false;
				}
			}
			
			public function togglePauseMedia():void {
				//do nothing
			}
			
			public function stopMedia():Boolean {
				return true;
			}
		]]>
	</mx:Script>
	<mx:Image id="myImage"/>
</mx:HBox>

The recommended way to implement the IMediaType interface is to create a class that is based on a UIComponent class, for instance the Box, VBox or HBox class. Furthermore, your class should implement four methods: get typeName(), playMedia(mediaData:XML), togglePauseMedia() and stopMedia(). The typeName method is a special method called a getter. It behaves like a variable, while it is implemented through a method. The important thing to remember is that you should return a unique string as type name, since this will be used in the playlist to add a custom media type.

To make the custom media type we just created accessible in the XimpelPlayer, we need to register your media type before starting the XimpelPlayer. In the following custom XIMPEL application we will register the Picture class:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ximpel="net.ximpel.player.*" 
    layout="vertical" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			private function init():void {
				var picture:Picture = new Picture();
				myXimpelPlayer.registerMediaType(picture);
				myXimpelPlayer.start();
			}
		]]>
	</mx:Script>
	<ximpel:XimpelPlayer id="myXimpelPlayer"/>
</mx:Application>

<ximpel>
  <subject id="IntroVideo">
    <description>Introduction video</description>
    <score>5</score>
    <media>
      <video file="fast1.flv"/>
      <picture file="images/panda.jpg">
        <canvas>
          <overlay width="160" height="160" x="0" y="0" leadsto="IntroVideo"/>
        </canvas>
      </picture>
    </media>
  </subject>
</ximpel>

As you can see in above example, overlays are also supported for custom media types.