videogular - cuePoints не работает

Question

Недавно я начал изучать контрольные точки Videogular.

Моя цель - приостановить видео в данный момент (5-я секунда здесь).

Вот мой угловой регулятор:

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(); 
    }] 
); 

Этот контроллер в основном работает нормально, но ни один из onLeave, onUpdate, onComplete обратных вызовов работают, не журналы, напечатанные в консоли через 6 секунд.

В моих кодах есть что-то неправильное? Благодарю.

Мое угловое исполнение 1.3.17, версия для видео - 1.2.4.

Answer 1

У вас есть рабочий пример здесь:

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> 

Вероятно, вы будете иметь что-то неправильно в HTML.