How to stop video (html5 video) in ionic framework when clicked on tab menu
<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>