How do I access the methods of the video when using Videogular?

Question

I have a video that I want to pause after it reaches X seconds.

• I can play the video

• I can listen to the currentTime through:

  <videogular data-vg-update-time="someFunction($currentTime,$duration)" ...> </videogular>

• I can catch the time I'm looking for in a controller:

  var controllers = {};
  controllers.SomeController = function($scope){
      $scope.someFunction($currentTime, $duration){
          // this is a total hack method to catch current time
          // stay in school or you'll write code like this
          if(Math.round($currentTime) === 6){
              // RIGHT HERE. I know the API must be exposing the video obj
              // but I haven't been able to figure out how to catch it.
              // 
              // var foo =  document.getElementsByTagName('video');
              // foo.pause();
          }
      }
  }
  myApp.controller(controllers);
  

Now, clearly there's a better way to come at this problem. It smells terrible that I'm dropping out of angular to evaluate currentTime, and to try to identify to video object. In part, I'm struggling because the object is created through a directive baked into Videogular. My controller+partial looks like:

[continued from above...]
[i.e controllers.SomeController = function($sce, $scope){

// this is the angular controller
$scope.attractConfig = {
    sources: [
        {src: $sce.trustAsResourceUrl("/video/myVideo.mp4"), type: "video/mp4"}
    ],
    theme: "/bower_components/videogular-themes-default/videogular.css",
    plugins: {
        poster: "http://www.videogular.com/assets/images/videogular.png"
    },
    autoPlay: true
};

// and this is the HTML partial
<div data-ng-controller="SomeController as controller">
    <videogular data-vg-theme="attractConfig.theme"
            data-vg-auto-play="attractConfig.autoPlay"
            data-vg-update-time="checkAttractTime($currentTime,$duration)"
            data-vg-complete="restartAttract()">
        <vg-media data-vg-src="attractConfig.sources"></vg-media>
    </videogular>
</div>

I fell like I'm 90% of the way there, but I can't figure out how to, say, directly call pause() or play() when the currentTime hits X seconds. I can't figure out how to target the video object, which appears via directive.

Answer 1

I couldn't get your example to work, but with this slight modification, it runs fine (I changed how controller is created):

var myArray= {};

myArray.MainCtrl = function($scope, $state, $sce) {
    $scope.API = null;
    $scope.onPlayerReady = function ($API) { 
        $scope.$API = $API; 
    };
    $scope.checkTime = function($currentTime){ 
        var currentTime = Math.round($currentTime);
        if (currentTime >= 10){
            $scope.$API.play(); // or whatever $API you want here
        }
    };
}

app.controller(myArray);

with

<div data-ng-controller="MainCtrl">
    <videogular 
        data-vg-player-ready="onPlayerReady($API)" 
        data-vg-update-time="checkTime($currentTime)">

        <vg-media data-vg-src="config.sources"></vg-media>

    </videogular>
</div>

I wonder why this stepped around the previous error?