videogular - cuePoints not working

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秒后日志。

我的代码里面有什么问题吗？谢谢。

我的Angular版本是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。