HBO: True Detective

Overview

FormatPage Grabber

PlatformDesktop + Mobile

EngineCustom Autoplay + GreenSock

AgencyUndertone

A cinematic video experience for the True Detective series premiere. The entire ad is a moody, noir-toned trailer clip that autoplays when the unit opens. The engineering challenge: making video autoplay reliably across every browser and device in 2014, when iOS blocked autoplay entirely. Full-screen ad for the HBO True Detective series premiere. The entire ad is a cinematic video experience: a moody, noir-toned trailer clip that autoplays when the unit opens. The engineering challenge was making video autoplay reliably across every browser and device in 2014, when iOS blocked autoplay entirely. The solution: a custom autoplay engine that negotiates between 5 video formats and falls back to an animated sprite sheet when native playback fails. The solution I engineered: a custom autoplay engine that negotiates between 5 video formats and falls back to an animated sprite sheet when native video playback isn't available.

How It Works

~100ms

Source Select

Detects device pixel ratio and screen width. Serves small-resolution MPG on 1x screens ≤640px, full resolution otherwise.

~18s

Autoplay

Video begins immediately. MP4 → WebM → OGG → MPG cascade. If none play, the 121-frame sprite sheet (3520×1980) animates at 8fps using CSS background-position.

Interactive

Audio Layer

Video starts muted. Unmute button toggles audio. iOS7-specific detection handles the platform's unique audio restrictions.

Auto

Close

18-second safety timeout fires if video freezes. 2-second delay before close ensures the end frame is visible. Manual close always available.

Engineering

Autoplay Video Engine

Custom jQuery plugin (.autoplay) that negotiates source format, manages play/pause state, and fires platform events. Not a simple <video> tag: a full state machine.

Sprite Sheet Fallback

121 frames composited into a 3520×1980 sprite sheet. JavaScript steps through frames at 8fps using background-position animation. Pixel-perfect on iOS where video autoplay was blocked.

Adaptive Resolution

window.devicePixelRatio and window.innerWidth determine which video source to serve. 1x screens under 640px get the small encode: saves bandwidth on lower-end devices.

Safety Timeout

closeOnEnd: 18000ms prevents a frozen video from permanently covering the publisher's content. closeDelay: 2000ms gives the end frame a beat before the unit collapses.

Engineering Decisions

GIFs at 3520×1980 would be 30+ MB. A single JPEG sprite sheet is ~2MB with JPEG compression. Stepping through frames with JS gives full control over framerate and timing.

2014 browser fragmentation required it. Firefox didn't support MP4, IE9 didn't support WebM, older Android needed OGG. The cascade ensures at least one format plays everywhere.

A frozen or buffering video that permanently covers a publisher's page is a contract violation. The timeout is a guardrail that protects the business relationship.

Browsers were already cracking down on audio autoplay. Starting muted with an explicit unmute button was the only pattern that worked reliably across platforms.