Page Visibility API

// Configura o nome da propriedade hidden e o evento de mudança para visibilidade
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
  // Suporte para Opera 12.10 e Firefox 18 em diante
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("videoElement");

// Se a página está escondida, pausa o video;
// Se a página está visível, reproduz o video
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// Alerta se o navegador não suporta addEventListener ou a API de visibilidade da página
if (
  typeof document.addEventListener === "undefined" ||
  typeof document[hidden] === "undefined"
) {
  alert(
    "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.",
  );
} else {
  // Manipula o evento de mudança da visibilidade da página
  document.addEventListener(visibilityChange, handleVisibilityChange, false);

  // Reverte para o favicon existente para o site quando a página é fechada;
  // caso contrário, o favicon continua como paused.png
  window.addEventListener(
    "unload",
    function () {
      favicon.change("/favicon.ico");
    },
    false,
  );

  // Quando o video é pausado, configura o favicon.
  // Isso mostra a imagem paused.png
  videoElement.addEventListener(
    "pause",
    function () {
      favicon.change("images/paused.png");
    },
    false,
  );

  // Quando o video é reproduzido, configura o favicon.
  videoElement.addEventListener(
    "play",
    function () {
      favicon.change("images/playing.png");
    },
    false,
  );

  // Configura o título da aba com o tempo atual do video
  videoElement.addEventListener(
    "timeupdate",
    function () {
      document.title = Math.floor(videoElement.currentTime) + " segundo(s)";
    },
    false,
  );
}

//startSimulation e pauseSimulation definidas em outro lugar
function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);