SO43154564

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    video.playing {
      opacity: 1;
      transition: opacity 3s ease;
    }
    
    video {
      opacity: 0;
      transition: opacity 3s ease;
    }
    
    kbd {
      border: 1px outset rgba(51, 51, 51, .5);
      border-radius: 4px;
      font: 400 14px/1.1 'Trebuchet MS';
      padding: 2px 8px;
      cursor: pointer;
    }
    
    samp {
      font: 400 14px/1.1 system;
    }
    
    ol ol {
      list-style: upper-latin;
    }
    
    .as-console {
      color: red;
      font-weight:700;
    }
    
    ;
  </style>
</head>

<body>
  <h3>Sequence of Web Storage Logs</h3>
  <h4>See the Console at the Bottom</h4>
  <ol>
    <li>Initial Load</li>
    <ol>
      <li>Log: <samp>Cache set to: played</samp></li>
    </ol>
    <li>After Reload</li>
    <ol>
      <li>Log: <samp>Cache is: played</samp></li>
      <li>Further reloads will yeild 2A</li>
    </ol>
    <li>Click <kbd>Delete Cache</kbd> button</li>
    <ol>
      <li>Log: <samp>undefined</samp></li>
    </ol>
  </ol>
  <button onclick='delete localStorage.cache; console.log(localStorage.cache)'>Delete Cache</button>


  <!-- Results pane console output; see http://meta.stackexchange.com/a/242491 -->
  <script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

  <script>
    // Register document to DOMContentLoaded event...
    document.addEventListener('DOMContentLoaded', function(e) {

      /* If there is a key:cache value:played
      || stored in localStorage...
      */
      if (localStorage.cache === "played") {

        // Log that it already exits and ...
        console.log('Cache is: ' + localStorage.cache);

        // Exit function
        return false;

      } else {

        /* Otherwise set key:cache/value:played in
        || localStorage...
        */
        localStorage.cache = "played";

        // and log previous action
        console.log('Cache set to: ' + localStorage.cache);

        // Create and reference video element
        var vid = document.createElement('video');

        // Invoke loadVid() passing vid
        loadVid(vid);

        /* Register ended event to vid
        || After video has ended...
        */
        vid.addEventListener('ended', function(e) {

          // invoke fadeVid()
          fadeVid(e.target);

        }, false);

      }

    }, false);

    function loadVid(vid) {

      // Add class for styling
      vid.classList.add('playing');

      // Add a src to .vid
      vid.src = 'http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4';

      // Load .vid
      vid.load();

      // Add .vid to body
      document.body.appendChild(vid);

      // Play video
      vid.play();

      return vid;

    }


    function fadeVid(vid) {

      // Pause vid
      vid.pause()

      /* Reset time played. This method used
      || along with .pause() is equivelant to "stop"
      */
      vid.currentTime = 0;

      // Simulate a `non-playing state`
      vid.classList.remove('playing');

      /* Delay the call to remove vid in order
      || to preserve the fade out effect.
      */
      setTimeout(function() {
        document.body.removeChild(vid);
      }, 2000);
    }
  </script>
</body>

</html>

/* Styles go here */