使用 Videogular 时如何访问视频的方法？

Question

我有一个视频要在播放到 X 秒后暂停。

• 我可以播放视频

• 我可以通过以下方式收听当前时间：

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

• 我可以在控制器中捕捉到我正在寻找的时间：

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

现在，显然有更好的方法来解决这个问题。闻起来很糟糕，我放弃了角度来评估 currentTime，并尝试识别视频对象。在某种程度上，我正在挣扎，因为该对象是通过嵌入 Videogular 的指令创建的。我的控制器+部分看起来像：

[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>

我觉得我已经走了 90% 的路，但我不知道如何在 currentTime 达到 X 秒时直接调用 pause() 或 play()。我不知道如何定位通过指令显示的视频对象。

Answer 1

我无法让您的示例运行，但稍作修改后，它运行良好（我更改了控制器的创建方式）：

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

与

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

我想知道为什么这会绕过之前的错误？

Answer 2

我建议你获取 Videogular 提供的 API，并使用 API 上的方法而不是原生视频方法。

在您的 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>

然后在你的控制器中：

$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();
    }
}

你有一个关于使用 Videogular 的 API 的很好的教程： http://www.videogular.com/tutorials/videogular-api/

如果您需要获取原生视频元素，可以通过 API 获取：

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