Amalia.js is a new extensible and versatile HTML5 multimedia player that allows you to view any type of metadata along with your video or audio streams. It follows the responsive design guidelines. Although initially developed as a tool to visualize the metadata extracted automatically by our algorithms (you can see some prototypes online), we believe it can be useful more broadly. Thus, we choose to share it as an open-source project under a MIT license. If you find amalia.js usefull, plan to use it, or even modify it, don't hesitate to contact us.

Amalia.js is composed of three main parts :

the core player
the unified metadata format
the visualization plugins

Amalia.js is developed and maintained by the Research Department and the IT Department of Ina (the French National Audiovisual Institute).

Download

Amalia.js is available as bulk downloads here. You can also clone our GitHub repository https://github.com/ina-foss/amalia.js.

amalia.js alone

Compiled and minified javascript and css for amalia.js video player and the main plugins

Download amalia.js

amalia.js packaged

amalia.js video player packaged with all third party libraries and some examples

Download full package

amalia.js source code

All source code and build scripts, allowing you to modify the plugins and learn how to create your own

Download source

Previous stable versions

v1.3.2 : amalia.js | packaged | source
v1.3.1 : amalia.js | packaged | source
v1.3.0 : amalia.js | packaged | source
v1.2.3 : amalia.js | packaged | source

Documentation

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

Examples

We list here applications and web sites that use amalia.js. If you integrate this player and want to be listed here, let us know !

Simple player

Even if it's not it's primary goal, amalia.js can also be used as a simple HTML5 video player, without any metadata provided

We used it, with a sticky control bar, for the video presentation of the Saphir project.

Timeline plugin

This plugin is used in DigInPix to visualize the keyframes in which some objects are automatically detected

Here are some links to nice exemples of this application :

Text synchronization plugin

This plugin is used in SyncNotes to synchronize a news broadcast video with it's manually annotated documentation.

It is also used in SpeechTrax to visualize speaker in Ina's TV and radio collections.

About

Publication

Amalia.js has been presented at the ACM Multimedia 2015 conference in Brisbane, Australia (see the presentation and the source code to generate it). We obtain an honorable mention (see on the sigmm website). If you use this player in your research, you can cite the following work in your publications :

Amalia.js : an Open-Source Metadata Driven HTML5 Multimedia Player (PDF)
N. Hervé, P. Letessier, M. Derval, H. Nabi
In Open-Source Software Competition, ACM Multimedia Conference 2015 (MM), October 2015, Brisbane, Australia

@inproceedings{Herve:2015:AOM:2733373.2807406,
     author = {Herv{\'e}, Nicolas and Letessier, Pierre and Derval, Mathieu and Nabi, Hakim},
     title = {Amalia.Js: An Open-Source Metadata Driven HTML5 Multimedia Player},
     booktitle = {Proceedings of the 23rd Annual ACM Conference on Multimedia Conference},
     series = {MM '15},
     year = {2015},
     isbn = {978-1-4503-3459-4},
     location = {Brisbane, Australia},
     pages = {709--712},
     numpages = {4},
     url = {http://doi.acm.org/10.1145/2733373.2807406},
     doi = {10.1145/2733373.2807406},
     acmid = {2807406},
     publisher = {ACM},
     address = {New York, NY, USA},
     keywords = {HTML5, metadata, multimedia, player, plugin},
}

License

Amalia.js and all it's plugins are now released under the MIT license.

Redistributions of source code, javascript and css minified versions must retain the copyright notice, the list of conditions and the disclaimer. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

There is no particular constraint on the choice of the licenses of the plugins you might develop. We, however, strongly encourage you to distribute your plugins publicly and place them under an open license.

Third party libraries

The following libraries are used by amalia.js and/or its plugins :

jQuery : easy DOM manipulation framework, MIT license (web site).
jQueryUI : user interface stuff on top of jQuery, MIT license (web site)
Raphaël : a vector graphics Javascript library, MIT License (web site)

Future work

Amalia.js is an ongoing project.Here the development roadmap for the futures months:

Amalia.js core : performance optimizations (especially with huge metadata blocks)
New visualization plugins
New media formats support : HLS/MPEG-DASH with Media Source Extensions.
Documentation : improve this web site

Any idea or help on these topics is welcome !

Contact

For any information, you can contact us at

Contact

For any information, you can contact us at