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.

score 2 · Accepted Answer · answered Nov 10 '15 at 17:14

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?

score 0 · Answer 2 · answered Oct 27 '15 at 09:09

I recommend you to grab the API provided by Videogular and use the methods on the API instead of native video methods.

In your HTML:

<div vg-player-ready="onPlayerReady($API)" 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>

Then in your controller:

$scope.onPlayerReady = function($API) {
    $scope.$API = $API;
}

$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){
        $API.pause();
    }
}

You have a good tutorial about using Videogular's API here: http://www.videogular.com/tutorials/videogular-api/

In case you need to grab the native video element you can get it throught the API:

console.log($scope.$API.mediaElement[0]);

I added the `
` to my HTML and `$scope.onPlayerReady = function($API) { $scope.$API = $API;}` to my controller. My `data-vg-update-time="checkAttractTime($currentTime,$duration)"` function fires off correctly every 0.3 sec or so, and catches the `if()` at 6 seconds. But this generates "Uncaught ReferenceError: $API is not defined". The **onPlayerReady** function never fires. The $API is never set in scope because the onPlayerReady function never fires, and so I can't access the player object or reference the $API.pause() method. Any idea why? — zipdog, Oct 28 '15 at 07:43
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; — zipdog, Nov 10 '15 at 16:56

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

2 Answers2