Angularjs 如何在点击选项卡菜单时停止ionic框架中的视频（html5视频）

使用以下参考资料：

• 
  

我正在尝试在我的ionic应用程序中停止我的视频，这时单击了其他选项卡

为了解决这个问题，我尝试了两种方法：

1）在ionic.bundle.js上面包含jquery，如下所示：

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

---

请帮忙

您可以创建自己的指令来控制视频，如下例所示。该示例在模式中有一个按钮，可以切换视频播放，但您可以使用自己的逻辑停止或播放视频（将

控制播放
属性设置为false/true）


angular.module（'ionicApp'，['ionic']））
.controller（'AppCtrl'，函数（$scope、$window、$sce、$rootScope、$IonicModel）{
$scope.videoSource=$sce.trustAsResourceUrl（“http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4");
$scope.play=true；
$scope.togglePlayer=函数（e）{
$scope.play=！$scope.play；
log（'togglePlayer:'+$scope.play）；
}
$ionicModal.fromTemplateUrl（'templates/modal.html'{
范围：$scope，
动画：“向上滑动”
}).then（功能（模态）{
$scope.modal=modal；
})
$scope.openModal=function（）{
console.log（“openmodel”）；
$scope.modal.show（）
}
$scope.closeModal=函数（）{
$scope.modal.hide（）；
};
$scope.$on（“$destroy”，函数（）{
$scope.modal.remove（）；
});
})
.directive（'videoControl'，函数（$rootScope）{
返回函数（$scope$element，attrs）{
属性$观察（“控制播放”，功能（值）{
log（'controlPlay:'+值）；
值=（值='false'？false:true）；
如果（值==false）{
log（'>stop'）；
$element[0]。暂停（）；
}否则{
log（'>play'）；
$element[0]。play（）；
}
});
$element[0]。addEventListener（“loadeddata”，函数（）{
console.log（'loadeddata'）；
$rootScope.$broadcast（'videoEvent'，{type:'loadeddata'}）；
});
$element[0]。addEventListener（“播放”），函数（）{
console.log（'playing'）；
$rootScope.$broadcast（'videoEvent'，{type:'playing'}）；
});
$element[0]。addEventListener（“已结束”，函数（）{
console.log（'end'）；
$rootScope.$broadcast（'videoEvent'，{type:'end'}）；
});
$element[0]。addEventListener（“暂停”，函数（）{
console.log（'pause'）；
$rootScope.$broadcast（'videoEvent'，{type:'pause'}）；
});
//等等。。。
}
});
。视频{
宽度：100%；
身高：80%；
保证金：0自动；
}

离子模态
模态示例
开放模态
视频模式
取消


切换播放

然后

>     $scope.showVideo = function(){
>       $scope.modal.show();
>       $scope.video[0].play()
>     }
> 
>     $scope.closeModal = function() {
>       $scope.video[0].stop()
>       $scope.modal.hide();    };

您是否尝试过简单的
document.getElementById（“compass”）.pause（）
？是的，但不起作用：(
> $ionicModal.fromTemplateUrl('video.html', {
>        scope: $scope,
>        animation: 'slide-in-up'
>     }).then(function(modal) {
>        $scope.modal = modal;
>        $scope.video = modal.$el.find("video"); //The target of find function is the video html element, you can use your own function to target by id or classs ...find(function(){...})
>     });

>     $scope.showVideo = function(){
>       $scope.modal.show();
>       $scope.video[0].play()
>     }
> 
>     $scope.closeModal = function() {
>       $scope.video[0].stop()
>       $scope.modal.hide();    };