videogular - cuePoints not working - angularjs

Question

Recently I started learning Videogular's cue points.
My aim is to pause the video at the given time (5th second here).
Here's my angular controller:
angular.module('myApp',[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls"
])
.controller('HomeCtrl', [
'$sce',
function ($sce) {
this.API = null;
this.onPlayerReady = function(API){
this.API = API;
};
this.init = function init(){
var timePoint = [];
var start = 5;
var end = 6;
var result = {};
result.timeLapse = {
start: start,
end: end
};
result.onLeave = function onLeave(currentTime, timeLapse, params) {
console.log('onleave');
};
result.onUpdate = function onComplete(currentTime, timeLapse, params) {
console.log('completed');
};
result.onComplete = function onUpdate(currentTime, timeLapse, params) {
console.log('update');
};
timePoint.push(result);
this.config = {
preload: "none",
sources: [
{src: $sce.trustAsResourceUrl(hv.url), type: "video/mp4"}
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
cuePoints: {
timePoint: timePoint
},
plugins: {
controls: {
autoHide: true,
autoHideTime: 5000
}
}
};
};
this.init();
}]
);
This controller mostly works fine, but none of the onLeave, onUpdate, onComplete callbacks work, no logs printed in console after 6 seconds.
Is there anything wrong inside my codes? Thanks.
My Angular version is 1.3.17, Videogular version is 1.2.4.

Answer 1

You have a working example here:
http://codepen.io/2fdevs/pen/zGJQbQ
JS:
'use strict';
angular.module('myApp', [
"ngSanitize",
"com.2fdevs.videogular"
])
.controller('HomeCtrl', [
'$sce',
function($sce) {
this.API = null;
this.onPlayerReady = function(API) {
this.API = API;
};
this.init = function init() {
var timePoint = [];
var start = 0;
var end = 6;
var result = {};
result.timeLapse = {
start: start,
end: end
};
result.onLeave = function onLeave(currentTime, timeLapse, params) {
console.log('onleave');
};
result.onUpdate = function onUpdate(currentTime, timeLapse, params) {
console.log('onUpdate');
};
result.onComplete = function onComplete(currentTime, timeLapse, params) {
console.log('onComplete');
};
timePoint.push(result);
this.config = {
preload: "none",
sources: [{
src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"),
type: "video/mp4"
}],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
cuePoints: {
timePoint: timePoint
},
plugins: {
controls: {
autoHide: true,
autoHideTime: 5000
}
}
};
};
this.init();
}
]);
HTML:
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-cue-points="controller.config.cuePoints" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks"
vg-native-controls="true">
</vg-media>
</videogular>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
Probably you will have something wrong in the HTML.