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

现在，显然有更好的方法来解决这个问题。我要退出 angular 来评估 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

我建议您使用 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]);

Answer 2

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

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>

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

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

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

google-chrome

playback

angularjs

videogular

pause