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秒后没有在控制台中打印日志。

我的代码里面有什么不对吗？感谢。

我的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中出错。