Quick start

The easiest way to integrate the amalia.js player in your application is to use the fully packaged version. All the third party libraries are provided along with the player code in two simple files for javascript and css parts. You will find the amalia.js libraries in the build directory and the dependencies in the bower_components directory. You can also have a look at the samples directory that has a simple example file for each plugin.

If you start your HTML page from scratch, add the following lines in the <header> section of your HTML page :

<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script> <script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script> <script type="text/javascript" src="bower_components/raphael/raphael.js"></script> <link href="build/css/amalia.js.min.css" type="text/css" rel="stylesheet" /> <script src="build/js/amalia.js.min.js" type="text/javascript"></script>

The default language is french. If you need an english version, you have to add the translation javascript file in your <header> section :

<script type="text/javascript" src="build/js/player-message-en.js"></script>

In the <body> section of your HTML page, you need a <div> that will be used to instantiate the player. The only requirement for that div is to have an id. In our example, we choose to limit the global height of the player.

<div style="height: 350px;"> <div id="myplayer"></div> </div>

Once this container is there, we can call the javascript function that will create the player. The only mandatory parameter is the multimedia stream that will be played. You can use any media format that is compatible with the targeted browsers of your application. Typically, for videos, you have to encode your files with h.264 and use mp4 container. For a complete list of initialization parameters of amalia.js, see the documentation below.

<script> $("#myplayer").mediaPlayer({ autoplay : false, src : "samples-data/examples/vid/amalia01.mp4", }); </script>

For testing purposes, we generate a demonstration video with all types of metadata attached to it. You can find the corresponding files in the samples-data directory.We will use this video along all the examples in this documentation. Here is the result of the three previous steps, providing a simple player :

Install via package manager

Bower

$ bower install amalia.js --save