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

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

2 个答案: