JL
HBO: True Detective
[View the ad]

HBO: True Detective

Cinematic video experience for HBO's True Detective series premiere. Custom autoplay engine negotiating 4 video formats, with a 121-frame sprite sheet as the fallback for iOS.

  • html5
  • css3
  • javascript
  • gsap
Format
Page Grabber
Platform
Desktop + Mobile
Engine
Custom Autoplay + GreenSock
Agency
Undertone

How It Works

1
~100ms

Source Select

Detects device pixel ratio and screen width. Serves small-resolution MPG on 1x screens ≤640px, full resolution otherwise.
2
~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.
3
Interactive

Audio Layer

Video starts muted. Unmute button toggles audio. iOS7-specific detection handles the platform's unique audio restrictions.
4
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.
  • 121
    frames

    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 640px wide or less get the small encode, which 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.

Get in touch

Email me

Working end to end across design, creative, and engineering, where creativity, collaboration, and ownership build toward the company's goals.

jeffkliu@gmail.com