diff -r 710a2ae08a74 -r a8bed1c7df8e cms/app-client/app/components/transcript-annotation-component.js
--- a/cms/app-client/app/components/transcript-annotation-component.js	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/app/components/transcript-annotation-component.js	Fri Dec 02 03:30:51 2016 +0100
@@ -2,7 +2,7 @@
 
 export default Ember.Component.extend({
 
-  classNameBindings: ['isPlaying:active'],
+  // classNameBindings: ['isPlaying:active'],
 
   hasPlayer: Ember.computed.bool('player'),
 
@@ -15,9 +15,16 @@
   literal: Ember.computed.readOnly('annotation.literal'),
   translation: Ember.computed.readOnly('annotation.translation'),
 
-  isPlaying: Ember.computed("hasPlayer","player.progress", "begin", "end", function() {
-    var progress = this.get('player.progress');
-    return this.get('hasPlayer') && progress && (progress >= this.get('begin')) && (progress < this.get('end'));
-  })
+  // isPlaying: Ember.computed("hasPlayer","player.progress", "begin", "end", function() {
+  //   var progress = this.get('player.progress');
+  //   return this.get('hasPlayer') && progress && (progress >= this.get('begin')) && (progress < this.get('end'));
+  // }),
+
+  didInsertElement: function() {
+    if(this.get('hasPlayer') && this.get('intervals')) {
+      this.get('intervals').add(this.get('begin'), this.get('end'), this.get('elementId'), this.$());
+    }
+  },
+
 
 });