--- a/web/res/metadataplayer/Transcript.js	Fri Dec 11 18:11:13 2015 +0100
+++ b/web/res/metadataplayer/Transcript.js	Tue Dec 29 13:25:14 2015 +0100
@@ -7,13 +7,13 @@
 IriSP.Widgets.Transcript.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.Transcript.prototype.defaults = {
-    annotation_type: "Caption"
-    // container: "transcriptContainer"
+    annotation_type: "Caption",
+    use_vtt_track: false
 }
 
 IriSP.Widgets.Transcript.prototype.template = '<div class="Ldt-TranscriptWidget"></div>';
 
-IriSP.Widgets.Transcript.prototype.annotationTemplate = '<a data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation" href="#{{id}}">{{ content }}</a> ';
+IriSP.Widgets.Transcript.prototype.annotationTemplate = '<span data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation">{{ content }}</span>  ';
 
 IriSP.Widgets.Transcript.prototype.draw = function() {
     var _annotations = this.getWidgetAnnotations();
@@ -23,15 +23,57 @@
     _this.renderTemplate();
     content = _this.$.find('.Ldt-TranscriptWidget');
 
-    _annotations.forEach(function(_a) {
-        var _data = {
-            id : _a.id,
-            content : IriSP.textFieldHtml(_a.title),
-            begin : _a.begin.toString(),
-            end : _a.end.toString()
-        };
-        var _html = Mustache.to_html(_this.annotationTemplate, _data);
-        var _el = IriSP.jQuery(_html);
-        content.append(_el);
-    });
+    if (_this.use_vtt_track) {
+        // Use webvtt track. It will only work with native video player.
+        var widgets =  _this.player.widgets.filter(function (w) { return w.type == "HtmlPlayer"; });
+        if (widgets) {
+            var v = widgets[0].$.find("video")[0];
+            // FIXME: allow to specify the used track
+            v.addEventListener("loadedmetadata", function () {
+                var track = v.textTracks[0];
+                var cues = track.cues;
+                var i = 1;
+                Array.prototype.forEach.apply(cues, [ function(_c) {
+                    _c.id = "cue" + i;
+                    var _html = Mustache.to_html(_this.annotationTemplate, {
+                        id : _c.id,
+                        content : _c.text,
+                        begin : 1000 * _c.startTime,
+                        end : 1000 * _c.endTime
+                    });
+                    i += 1;
+                    var _el = IriSP.jQuery(_html);
+                    content.append(_el);
+                } ]);
+                track.addEventListener("cuechange", function () {
+                    var acues = track.activeCues;
+                    if (acues.length > 0) {
+                        // Update attributes for active cues
+                        _this.$.find(".Ldt-Transcript-Annotation.active").removeClass("active");
+                        Array.prototype.forEach.apply(acues, [ function(_c) {
+                            _this.$.find("#" + _c.id).addClass("active");
+                        } ]);
+                    }
+                }, false);
+                content.on("click", ".Ldt-Transcript-Annotation", function () {
+                    _this.media.setCurrentTime(this.dataset.begin);
+                });
+            });
+        } else {
+            console.log("cannot find a video object");
+        }
+    } else {
+        // Populate with annotation data
+        _annotations.forEach(function(_a) {
+            var _data = {
+                id : _a.id,
+                content : IriSP.textFieldHtml(_a.title),
+                begin : _a.begin.toString(),
+                end : _a.end.toString()
+            };
+            var _html = Mustache.to_html(_this.annotationTemplate, _data);
+            var _el = IriSP.jQuery(_html);
+            content.append(_el);
+        });
+    };
 };