HTML video pause when window is minimized

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.

How can add that feature to my html?

I added javascript function but video is still being played in any condition

edit: sharing my code.

    <!DOCTYPE html>
<html> 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>



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

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

</video>


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

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

}

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

  </script>


</body> 
</html>

Solution

Simple javascript event:

window.onfocus = function() { document.getElementById('player').play(); };
window.onblur = function() { document.getElementById('player').pause(); };

<video height="180" controls autoplay loop id=player>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

Javascript event with EventListener:

window.addEventListener("focus", aaa);
window.addEventListener("blur", bbb);

function aaa(){
document.getElementById('player').play();  
}

function bbb(){
document.getElementById('player').pause();
}

<video height="180" controls autoplay loop id=player>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

video source: techslides