HTML video pause when window is minimized
<p>I have a html file that contains a video. I want to add a feature to pause video when the window is minimized or the tab is changed on browser.</p>

<p>How can add that feature to my html?</p>

<p>I added javascript function but video is still being played in any condition</p>

<p>edit: sharing my code.</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html&gt; 
&lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;



&lt;head&gt; 
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt; 
&lt;title&gt;Untitled 1&lt;/title&gt; 
&lt;/head&gt; 
&lt;body&gt; 

 &lt;video id="videoPlayer" width="640" height="480" position="center" controls&gt;
  &lt;source src="\\TEKPC1366\Users\BerkayS\Desktop\DataModel2\DataModel3\DataModelYazisiz.mp4" type="video/mp4" /&gt;
  &lt;source src="\\TEKPC1366\Users\BerkayS\Desktop\DataModel2\DataModel3\DataModelYazisiz.mp4.webm" type="video/webm" /&gt;
  &lt;track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\deneme.vtt" kind="subtitles" srclang="tu" label="Türkçe" /&gt;
  &lt;track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemeenglish.vtt" kind="subtitles" srclang="en" label="English" /&gt;   
  &lt;track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemedeutsch.vtt" kind="subtitles" srclang="de" label="Deutsch" /&gt;
  &lt;track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemespanish.vtt" kind="subtitles" srclang="es" label="Espanol" /&gt;
  &lt;track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemerussian.vtt" kind="subtitles" srclang="ru" label="русский" /&gt;
  &lt;track src="C:\Users\BerkayS\Desktop\DataModel2\DataModel3\denemearabic.vtt" kind="subtitles" srclang="ar" label="العربية" /&gt;

&lt;/video&gt;


  &lt;script
window.onfocus = function() {kaf()};
window.onblur = function() {kef()};

function kaf() {
 document.getElementById('videoPlayer').play(); 

}

function kef() {
 document.getElementById('videoPlayer').pause(); 
}

  &lt;/script&gt;


&lt;/body&gt; 
&lt;/html&gt;
</code></pre>