This is a message.

Cuepoints

Cuepoints are a powerful way of executing code at predefined times during playback. This mechanism is especially useful for long videos where you might want to have special events triggered during the period in which the video is playing. For example, in teaching videos you might want to enrich your clip with help texts or other interactive material. Or, in a more commercial setting, you might want to show targeted advertisements at certain points in the video.

Here is a basic cuepoint configuration for a clip: 

clip : {
    url: 'example.f4v',
 
    onCuepoint: [
       // each integer represents milliseconds in the timeline
        [4000, 1100, 3600, -2300],
 
        // this function is triggered when a cuepoint is reached
        function(clip, cuepoint) {
            alert("cuepoint " + cuepoint + " entered on clip " + clip.url);
        }
    ]
}

JavaScript

If the time is given as a negative integer, then it is calculated from the end of the video. So -1000 means the last second of the video, -2000 means two seconds from the end of the video, and so on.

Configuring cuepoints

Cuepoints are set up in the onCuepoint event listener. It differs from all other event listeners inasmuch as it customizes a series of events and is configured as an array with the event handler as second item.

ListenerHow To Configure

onCuepoint

An array of 2 members:

  1. an array of customizable cuepoints containing:

    • the time when the event is fired - either an integer or a property labeled time (mandatory)
    • custom properties for the specific cuepoint (optional)

  2. the cuepoint event handler function which takes 2 arguments:

    1. the current clip object
    2. the current cuepoint

Cuepoint properties

Each cuepoint can optionally have custom properties that are supplied to the event handler. 

clip : {
    url: 'example.m4v',
 
    onCuepoint: [
        // set up last two cuepoints with custom properties
        [
            4,
            {time: 1100, caption: 'Something weird happened here', bottom:0},
            {
                time: 3300, duration: 5400,
                title: 'Acme home', url:'http://www.acme.org'
            }
        ],
 
        // cuepoint argument can have properties
        function(clip, cuepoint) {
            if (cuepoint.url) {
                showAdvertisement(cuepoint);
            } else if (cuepoint.caption) {
                showCaption(cuepoint);
            }
        }
    ]
}

JavaScript

Single cuepoint

Sometimes you just want to define a single cuepoint and not a long list. In that case, you can omit the array and just supply one number. 

clip: {
    // cause something to happen two seconds before playback ends
    onCuepoint: [-2000, function() {
      // do something ...
    }];
}

JavaScript

Scripting cuepoints

You can also add cuepoints by scripting. Here is an example. 

onLoad: function() {
    this.onCuepoint([1100, 2400, 3350], function(clip, cuepoint) {
        // put some logging information into firebug console
        console.log("cuepoint entered", clip, cuepoint);
    });
}

JavaScript

Note how the 2 members of the onCuepoint configuration array turn into 2 arguments when onCuepoint is called as an API function.

Cuepoint example

This example uses two cuepoints that both print messages using the content plugin.

Cuepoint example 
$f("example7", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
    // these properties and events are common to each clip in the playlist
    clip: {
        url: 'http://stream.flowplayer.org/KimAronson-TwentySeconds1318.flv',
 
        // playback lasts only 10 seconds
        duration: 10,
 
        // print message on seconds 2 and 7
        onCuepoint: [[2000, -3000], function(clip, point) {
            this.getPlugin("content").setHtml(this.id() + ": " + point);
        }]
    },
 
    // set up content plugin
    plugins: {
        content: {url: 'flowplayer.content-3.2.8.swf'}
    }
});

JavaScript