2

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

  • 我可以播放视频

  • 我可以通过以下方式收听 currentTime：

    <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() 。我不知道如何定位通过指令出现的视频对象。

4

2 回答 2

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>

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

于 2015-11-10T17:14:56.123 回答
0

我建议您获取 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]);
于 2015-10-27T09:09:27.670 回答