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, версия Videogular 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.