CommonHIT heat-map example

First, include the YouTube player. Here, we use data-name="lllplayer":

How to include a static heat-map:

How to include a live heat-map (mainly for debugging purposes):

How to include a dummy heat-map (for illustrative purposes):

Attributes:

class="lll-heatmap"

Signals llheatmap.js to insert a heat-map here.

data-name

The name of the global variable that llheatmap.js will use to expose the scripting functionality of the heat-map.

data-for

The name of the player for which this heat-map is for. Note: This means that the player's scripting functionality must be exposed. That is, the data-name attribute on the player is required.

data-map

The heat-map to be painted, represented as a comma-separated list of numbers between 0.0 and 1, or the string "LIVE" for a live heat-map that depicts which parts of the video have been watched.

data-width, data-height

Optional: Set a custom size for the heat-map.

Scripting examples:

heatmap.paintHeatmap([0,0,0.8,0,0,1,0]);

Run example

var output = $('#outputExample2'); 
function handler(t) {
	var name = $(this.node).data('name');
	var t = LLL.HEATMAP.timecodeToHHMMSS(t);
	output.text(name + ' ' + t + '\n' + output.text())
}

var subscription1 = heatmap.addClickListener(handler);
var subscription2 = live_heatmap.addClickListener(handler);
var subscription3 = dummy_heatmap.addClickListener(handler);
output.text('Now click on the heat-map')

// removing the listener: <subscription>.dispose();

Run example