如何選項卡菜單

上點擊使用下面的引用時停止離子框架視頻（HTML5視頻）：如何選項卡菜單

我試圖阻止我的視頻在我的離子應用程序中點擊某個其他標籤時。

要管理這個我試過兩種方式：

1）包括jQuery的上述ionic.bundle.js這樣的：

<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 is not a function

另一個我使用的方法是：

2）angular.element(document.getElementById("compass")).pause();

，但我得到這個錯誤：

TypeError: angular.element(...).pause is not a function

我視頻的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>

請幫幫忙！

來源

2016-02-24 Vishal Sharma

你試過只是'的document.getElementById（「指南針」）暫停（）'？ – beaver

是的，但它不工作:( –

您可以創建自己的指令來控制視頻，如下例所示。該示例在模式中有一個按鈕，可以切換視頻播放，但您可以使用自己的邏輯來停止或播放視頻（將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/

來源

2016-02-24 12:47:59 beaver

如何選項卡菜單

回答

相關問題