Modernizing the Web Playback UI

by Corey Grunewald & Matt Jaquish

The visual design and user controls of playback have been the same since 2013.
The new, modern playback UI

If At First You Don’t Succeed…

Doing Too Much at Once

Isolating Changes

Rendering Performance Gap

Histogram of playback load times using the custom framework (green), overlayed with React (red).

Try, Try Again

Test Design

Need for Speed

// Inside Player.jsx...

componentDidMount() {
performance.mark(
`playbackMilestone:start:${this.state.playbackView}`
);
}

componentDidUpdate(prevProps, prevState) {
if (prevState.playbackView !== this.state.playbackView) {
performance.mark(
`playbackMilestone:end:${this.state.playbackView}`
);
performance.mark(
`playbackMilestone:start:${this.state.playbackView}`
);
}
if (this.state.playbackView === PlaybackViews.PLAYBACK) {
// serialize and log playback performance data.
}
}

Under the Hood: Simplifying Playback Logic

Separating Video Lifecycle From UI Lifecycle

Standardizing the Data Representation of a Video Playback

Adding Support for Multiple Video Playbacks

An Implementation of Application State

Enabling Plug & Play Logic

A New Coat of Paint with A Better Engine

Netflix TechBlog

Learn about Netflix’s world class engineering efforts, company culture, product developments and more.

Netflix Technology Blog

Written by

Learn more about how Netflix designs, builds, and operates our systems and engineering organizations

Netflix TechBlog

Learn about Netflix’s world class engineering efforts, company culture, product developments and more.