title: How to stop video (html5 video) in ionic framework when clicked on tab menu
body: <p>Using the following references:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/2879227/html5-video-stop-onclose">HTML5 Video Stop onClose</a><br></li>
  <li><a href="https://stackoverflow.com/questions/26123766/how-to-access-ionicmodal-object-elements-by-id-in-ionic-framework">How to access $ionicModal object elements by id in ionic framework?</a></li>
  </ul>
  
  <p>I'm trying to stop my video in my ionic app when some other tab is clicked.</p>
  
  <p>To manage this I tried two ways:</p>
  
  <p><strong>1)</strong> included jquery above ionic.bundle.js like this:</p>
  
  <pre><code>&lt;script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt; &lt;/script&gt;
  
  &lt;!-- ionic/angularjs js --&gt;
  &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and then in my controller I tried <code>$("#compass").pause();</code></p>
  
  <p>but this gives error:</p>
  
  <blockquote>
    <p>TypeError: $(...).pause is not a function</p>
  </blockquote>
  
  <p>Another approach I used is:</p>
  
  <p><strong>2)</strong> <code>angular.element(document.getElementById("compass")).pause();</code></p>
  
  <p>but I get this error:</p>
  
  <blockquote>
    <p>TypeError: angular.element(...).pause is not a function</p>
  </blockquote>
  
  <p>My video html is as follows:</p>
  
  <pre><code>&lt;ion-view&gt;
      &lt;div class="fullscreen-player" ng-click="closeModal()"&gt;
          &lt;video id="compass" src="media/news_compass.mp4" width="100%" class="centerme" controls="controls" autoplay&gt;&lt;/video&gt;
      &lt;/div&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>Please help!</p>