Pause video when user switches browser's tab

You might be curious how to pause video.js player when user switches browser's TAB and resume playback when user's back to your website page. This is what you can find on most of our website demo and examples page.

This is not complicated task using document "visibilitychange" event through javascript.

Let's assume that you already initialized your video.js player using "player" variable. The code below will pause video when user leave your website page by clicking other TAB in browser. When user's back, video will resume to play video if it was playing before.

See full javascript code below.

<script type="text/javascript">
var player = videojs ('player_id');

var focused = true; 
var player_state = false;
document.addEventListener("visibilitychange", function () {
   focused = !focused;
   if (!focused) {
      if (typeof player !== 'undefined') { 
         if(player.paused()) player_state=true;
            player.pause(); 
         }
      } else {
         if(player_state!=true) {
            player.play();
         }
      }
});
</script>

Have fun!