angularjs – 单击选项卡菜单时如何在离子框架中停止视频(html5
使用以下参考:
> HTML5 Video Stop onClose 当点击其他选项卡时,我正试图在我的离子应用程序中停止我的视频. 为了管理这个,我尝试了两种方法: 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(); 但这会给出错误:
我使用的另一种方法是: 2)angular.element(document.getElementById(“compass”)).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> 请帮忙! 解决方法
您可以创建自己的指令来控制视频,如下例所示.该示例在模式中有一个按钮,可以切换视频播放,但您可以使用自己的逻辑来停止或播放视频(将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... } }); .video{ width: 100%; height: 80%; margin:0 auto; } <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> 这是CodePen链接:http://codepen.io/beaver71/pen/Veogrg/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |