在播放新视频时停止正在后台播放的其他视频

Question

我正在使用 Videogular 来显示视频。你能帮我 stop/pause 当用户点击播放按钮到新的视频时如何播放其他视频吗？因此，用户一次只能播放一个视频。

系统应该会自动停止正在后台播放的其他视频并播放新视频

谢谢

Answer 1

您可以为每个播放器单独获取所有 API 并监听状态变化：

<videogular ng-repeat="config in ctrl.videoConfigs" vg-player-ready="ctrl.onPlayerReady($API, $index)" vg-update-state="ctrl.onUpdateState($state, $index)">
    <!-- other plugins here -->
</videogular>

在你的控制器中：

'use strict';
angular.module('myApp').controller('MainCtrl',
    function ($sce) {
        // this.videoConfigs should have different configs for each player...

        this.players = [];

        this.onPlayerReady = function (API, index) {
            this.players[index] = API;
        };

        this.onUpdateState = function (state, index) {
            if (state === 'play') {
                // pause other players
                for (var i=0, l=this.players.length; i<l; i++) {
                    if (i !== index) {
                        this.players[i].pause();
                    }
                }
            }
        };
    }
);

Answer 2

虽然elecash的答案很好，但是有很多猜测和存储。我选择仅在 $rootScope 上存储活动 api 并在新玩家开始时暂停另一个玩家。

<videogular vg-player-ready="playerReady($API)" vg-update-state="stateChange($state)">
</videogular>

controller('VideoPlayerCtrl', ['$rootScope','$scope', function($rootScope,$scope) {
  $scope.playerReady = function(api) {
    $scope.api = api;
  };

  $scope.stateChange = function(state) {
    if(state=='play') {
      if($rootScope.playingVideo && $rootScope.playingVideo != $scope.api) $rootScope.playingVideo.pause();
      $rootScope.playingVideo = $scope.api;
    }
  };
}]);

在播放新视频时停止正在后台播放的其他视频

stop other video that is playing in background on play the new one

html5-video

angularjs

videogular