从 Controller 控制 ngVideo 对象

Question

我在一个项目中使用 ngVideo，我不确定你会如何 get/set 来自控制器的当前时间。

我的控制器：

'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);

});

我的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>

Answer 1

video.currentTime = 10;

应该设置时间。如果您需要在代码中的其他地方重置时间，我会创建一个函数来设置时间，例如：

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

然后，您可以从表单或其他代码中调用它：

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

或

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

或者，您可以将视频音量绑定到输入字段（无功能）：

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

希望对您有所帮助！

从 Controller 控制 ngVideo 对象

Controlling ngVideo object from Controller

html5-video

angularjs

angularjs-directive

angularjs-scope