Timeline plugin

The purpose of this plugin is to represent all the timecoded metadata on a timeline. This plugin is composed of two parts. At the top, the time axis where you can navigate and zoom in the timeline. You may use either the appropriate buttons or the mouse

Below the time axis, all the timelines are displayed. For a given media, we can display as many timelines as desired, each of which may be linked to a different source of metadata displayed with a specific type of line. For the moment, we have three type of lines :

• cuepoint: to visualize simple temporal points (localisation with a tc field)
• segment: to visualize temporal segment (localisation with tcin and tcout fields)
• image: to visualize simple temporal points with images (localisation with tc and thumb fields)

The timeline is synchronized with the player, a progress bar indicates the current position in the media and a click on any object represented in the timeline will seek in the media at the correct timecode.

The player and the timeline plugin are in two separate div in your HTML. Again, each of these div must have an id that will be referenced in the player initialization javascript code. Below is a simple example. The timeline plugin is not necessarily just below the player. It's up to you to set the div at the correct place.

<div id="myplayer-timeline-container">
        <div style="height: 350px;">
                <div id="myplayer-timeline"></div>
        </div>
        <div id="myplayer-timeline-timeline" style="height: 265px;"></div>
        <div style="clear: both;"></div>
</div>
        

Timeline control buttons

On the time axis, you will find the following control buttons :

	slide left and right on the time axis (same as click and drag)
	zoom in and out (same as mouse scroll), change the timelines height

On each line, depending on the initialization parameters, you may find the following control buttons :

	go to previous / next timecoded element
	collapse / expand the line, change the line order in the list (click and drag to move the line up or down)

In the following example, we create a player and load metadata blocks from three different sources. We add the timeline plugin with three lines. Each one of these lines is bound to a different metadata block of a specific type.

Timeline plugin options:

$("#myplayer-timeline").mediaPlayer({
    autoplay : false,
    src : "samples-data/examples/vid/amalia01.mp4",
    plugins: {
        dataServices: [
            'samples-data/examples/json/amalia01-events.json',
            'samples-data/examples/json/amalia01-kf.json',
            'samples-data/examples/json/amalia01-ball.json'
        ],
        list: [
            {
                'className': 'fr.ina.amalia.player.plugins.TimelinePlugin',
                'container': '#myplayer-timeline-timeline',
                'parameters': {
                    listOfLines: [
                        {
                            title: 'Events',
                            type: 'cuepoint',
                            metadataId: 'events-amalia01',
                            color: '#3CF',
                            pointNav: true
                        },
                        {
                            title: 'Ball moving up',
                            type: 'segment',
                            metadataId: 'ball-amalia01',
                            color: '#F00'
                        },
                        {
                            title: 'Keyframes every 2s',
                            type: 'image',
                            metadataId: 'kf-amalia01',
                            pointNav: true
                        },
                    ]
                }
            }
        ]
    }
});