使用以下参考资料:
点击其他标签时,我试图在离子应用中停止播放视频。
为了解决这个问题,我尝试了两种方法:
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>
然后在我的控制器中我尝试了$("#compass").pause();
但这会产生错误:
TypeError:$(...)。pause不是函数
我使用的另一种方法是:
2) angular.element(document.getElementById("compass")).pause();
但是我收到了这个错误:
TypeError:angular.element(...)。pause不是函数
我的视频html如下:
<ion-view>
<div class="fullscreen-player" ng-click="closeModal()">
<video id="compass" src="media/news_compass.mp4" width="100%" class="centerme" controls="controls" autoplay></video>
</div>
</ion-view>
请帮忙!
答案 0 :(得分:3)
您可以创建自己的指令来控制视频,如下例所示。该示例在模式中有一个按钮,可以切换视频播放,但您可以使用自己的逻辑来停止或播放视频(将control-play
属性设置为false / true)。
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $window,$sce,$rootScope,$ionicModal){
$scope.videoSource = $sce.trustAsResourceUrl("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4");
$scope.play = true;
$scope.togglePlayer = function(e) {
$scope.play = !$scope.play;
console.log('togglePlayer: '+$scope.play);
}
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
})
$scope.openModal = function() {
console.log("openModal");
$scope.modal.show()
}
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
.directive('videoControl', function ($rootScope) {
return function ($scope, $element, attrs) {
attrs.$observe("controlPlay", function(value) {
console.log('controlPlay: '+value);
value = (value == 'false' ? false : true);
if (value==false) {
console.log(' > stop');
$element[0].pause();
} else {
console.log(' > play');
$element[0].play();
}
});
$element[0].addEventListener("loadeddata", function () {
console.log('loadeddata');
$rootScope.$broadcast('videoEvent', { type: 'loadeddata' });
});
$element[0].addEventListener("playing", function () {
console.log('playing');
$rootScope.$broadcast('videoEvent', { type: 'playing' });
});
$element[0].addEventListener("ended", function () {
console.log('ended');
$rootScope.$broadcast('videoEvent', { type: 'ended' });
});
$element[0].addEventListener("pause", function () {
console.log('pause');
$rootScope.$broadcast('videoEvent', { type: 'pause' });
});
// and so on...
}
});
&#13;
.video{
width: 100%;
height: 80%;
margin:0 auto;
}
&#13;
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Modal example</h1>
<div class="buttons">
<button class="button button-icon ion-compose" ng-click="openModal()">
</button>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item>
<button class="button button-positive button-primary" ng-click="openModal()">Open modal</button>
</ion-item>
</ion-list>
</ion-content>
<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Video modal</h1>
<button class="button button-clear button-primary" ng-click="closeModal()">Cancel</button>
</ion-header-bar>
<ion-content>
<div class="embed-responsive embed-responsive-16by9">
<video id="video-player" class="video" video-control control-play="{{play}}" oncontextmenu="return false" autoplay="true" loop controls="controls" class="composition-video" ng-src="{{videoSource}}" type="video/mp4"></video>
</div>
<br>
<button ng-click="togglePlayer($event)">Toggle play</button>
</ion-content>
</ion-modal-view>
</script>
</body>
</html>
&#13;
以下是CodePen链接:http://codepen.io/beaver71/pen/Veogrg/
答案 1 :(得分:0)
> $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(); };