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

さて、明らかに、この問題を解決するためのより良い方法があります。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() を直接呼び出す方法がわかりません。ディレクティブを介して表示されるビデオ オブジェクトをターゲットにする方法がわかりません。

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 に答える