Search code examples
angularjsangularjs-directiveangularjs-scopehtml5-video

Controlling ngVideo object from Controller


I'm using ngVideo in a project and am not sure how you would get/set current time from the controller.

My controller:

'use strict';

angular.module('clientApp')
.config(function($stateProvider){
  $stateProvider
  .state('video', {
    url:'/video',
    templateUrl:'views/video.html',
    controller:'VideoController as video'
  });
})
.controller('VideoController', function($scope, video){
  video.addSource('mp4', 'views/unit_1.mp4');
  video.currentTime = 10;
  console.log('Current Time: ' video.currentTime);

});

My HTML:

<section class="video" ng-video>
  <video vi-screen></video>
<section vi-feedback>

    <ul>
        <li>Time: {{currentTime}}s / {{duration}}s</li>
        <li>Volume: {{volume}}</li>
        <li>Buffered: {{buffered}}%</li>
        <li>Loading: {{loading}}</li>
        <li>Playing: {{playing}}</li>
    </ul>

</section>
</section>

Solution

  • video.currentTime = 10;
    

    should set the time. I would create a function to set the time if you need to reset it elsewhere in the code like:

    $scope.setCurrentTime = function(newTime) {
        video.currentTime = newTime;
    };
    

    Then, you can call it from a form or other code:

    <button ng-click="setCurrentTime(30)">Set to 30</button>
    

    or

    if (some condition) {
        $scope.setCurrentTime(30);
    }
    

    or, you can bind the video volume to an input field (without the function):

    <input id="videoTime" ng-model="video.currentTime" />
    

    Hope that helps!