JSFiddle - React, Tailwind, and code Playground

by mgrassotti

HTML

<h1> Auto Pause Video Bookmarklet </h1>
<a href="javascript:(function ($) {var playing;var video = $('video')[0]; $(window).blur(function(){playing = !video.paused;video.pause();}).focus(function(){if (playing) {video.play();}})})(jQuery)" class="bookmarklet">
    Auto-Pause
</a>

<strong> &lt;-- Drag the link to your bookmarks bar</strong>

<h2>About this Bookmarklet</h2>
<p>
    This bookmarklet works on any page with a &lt;video&gt; element and jQuery. When activated it will make it so the video will pause when you blur from the browser and will continue to play when you refocus to the window. I created this for watching <a href="http://teamtreehouse.com">Treehouse</a> videos, so that I can tab out to my code, and automatically have the video pause, and resume when I come back</p>
    
    <p> This is a real bookmarklet I created for my own personal use, but I leave it as an example for all. You can learn about <a href="http://thinkvitamin.com/code/javascript/creating-bookmarklets-for-fun-and-profit/">creating bookmarlets on Think Vitamin</a></p>

CSS

body {
   font-family: sans-serif;   
}
a.bookmarklet {
  background: #CCC;
  padding: 5px 10px;  
  color: #000;
  border: solid 1px #000;
  border-radius: 3px;
}

JavaScript

// This is the uncompressed code used in the bookmarklet
// This is just for demonstration, the real code is in the html

(function ($) {
    // Store whether the video is playing on blur
    var playing;   
    // Grab the first <video> element
    var video = $('video')[0]; 
    
    // Listen for the windows focus and blur events
    $(window).blur(function () {
        // When bluring, remember if video was playing, then pause
        playing = !video.paused;
        video.pause();
    }).focus(function () { 
        // When focusing, if the video was playing on blur, continue playing
        if (playing) {
            video.play();
        }
    })
})(jQuery) // Alias jQuery to $ in our wrapper function.