Automatically starting a video on browser tab focus

presentations
video
This is a bit of a weird one, which is possibly only of interest to me and the weird way I do presentations these days, using Safari Tabs.
Published

September 17, 2025

This is a bit of a weird one, which is possibly only of interest to me and the weird way I do presentations these days. PowerPoint and Keynote are far too sensible, I like to give presentations using this unnecessarily complex way:

  1. I create a new tab group in a special Safari profile I have set up just for presentations.
  2. Each tab is one slide (so I can change slide order just by dragging the tabs).
  3. I have a Stream Deck key that moves me to the next slide using a Control-Tab keystroke.

I want to put videos on slides, and for the video to automatically play when the tab has focus (i.e. it is the current slide being displayed). This can be done with an event listener listening for focus, and playing the video. In the script below I also remove the video controls (just by not specifying their display in the video tag), and play the video at half speed.

This simply means I can have a video play automatically in my slide deck.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Video</title>
    <style>
        body { margin: 0; background: black; }
        video { width: 100%; height: 100vh; object-fit: contain; }
    </style>
</head>
<body>
    <video id="video" preload="auto">
        <source src="inference-slide.mp4" type="video/mp4">
    </video>

    <script>
        const video = document.getElementById('video');
        let hasInteracted = false;
        
        // Track user interaction for autoplay policy
        document.addEventListener('click', () => hasInteracted = true, { once: true });
        
        // Auto-focus and play when tab becomes active
        window.addEventListener('focus', () => {
            video.focus();
            if (video.paused && hasInteracted) {
                video.play();
            }
        });
        
        // Auto-focus on load
        video.focus();
        
        // Set playback speed (0.5 = half speed, 2.0 = double speed)
        video.playbackRate = 0.5;
    </script>
</body>
</html>