单击选项卡菜单时如何在离子框架中停止视频（html5视频）答案

【问题标题】：How to stop video (html5 video) in ionic framework when clicked on tab menu单击选项卡菜单时如何在离子框架中停止视频（html5视频）
【发布时间】：2016-02-24 10:27:50
【问题描述】：

使用以下参考：

当点击其他选项卡时，我试图在我的 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>

然后在我的控制器中我尝试了$("#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>

请帮忙！

【问题讨论】：

你试过简单的document.getElementById("compass").pause() 吗？
是的，但它不起作用:(

标签： angularjs ionic-framework

【解决方案1】：

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

【讨论】：

【解决方案2】：

> $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();    };

【讨论】：