<video id="videoElement" controls poster="thumbnail.jpg">
  <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)"> 
  <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-Mobile.webm" type="video/webm" media="all and (max-width:680px)"> 
  <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-SD.mp4" type="video/mp4">
  <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-SD.webm" type="video/webm">
  <p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
// Inline code is for educational purposes. Best practice is to put your scripts in external files.
// Based on the tutorial at https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

(function() {
  'use strict';

  // Set the name of the "hidden" property and the change event for visibility
  var hidden, visibilityChange; 
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";

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

  // If the page is hidden, pause the video;
  // if the page is shown, play the video
  function handleVisibilityChange() {
    if (document[hidden]) {
    } else if (started) {

  // Warn if the browser doesn't support addEventListener or the Page Visibility API
  if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    alert("This demo requires a modern browser that supports the Page Visibility API.");
  } else {
    // Handle page visibility change   
    document.addEventListener(visibilityChange, handleVisibilityChange, false);

    // When the video pauses and plays, change the title.
    videoElement.addEventListener("pause", function(){
      document.title = 'Paused';
      started = false;
    }, false);

    videoElement.addEventListener("play", function(){
      document.title = 'Playing'
      started = true;
    }, false);


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.