HBO: True Detective
Cinematic video experience for HBO's True Detective series premiere. Custom autoplay engine negotiating 5 video formats with a 121-frame sprite sheet fallback for iOS.
- html5
- css3
- javascript
- gsap
- Format
- Page Grabber
- Platform
- Desktop + Mobile
- Engine
- Custom Autoplay + GreenSock
- Agency
- Undertone
How It Works
1
~100msSource Select
Detects device pixel ratio and screen width. Serves small-resolution MPG on 1x screens ≤640px, full resolution otherwise.
2
~18sAutoplay
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.
3
InteractiveAudio Layer
Video starts muted. Unmute button toggles audio. iOS7-specific detection handles the platform's unique audio restrictions.
4
AutoClose
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.- 121frames
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.
More projects
Get in touch
From idea to production across design, creative, and engineering. I ship end to end, and the vision stays company-first the whole way.
jeffkliu@gmail.com