Delivering Meaning with Previews on Web

By Corey Grunewald and Tony Casparro

Our final video preview experience on the web
  • Integrate video preview playback in existing canvases
  • Create an intuitive user experience

Optimize Page Load

The previous version of the home page rendered all rows of titles as its highest priority. This included fetching data from the server, creating all DOM nodes, and loading images. Our goal was to enable fast vertical scrolling through 30+ rows of titles.

Page load from the server vs. page load after auto-loading all rows
Page load from the server vs. page load after auto-loading all rows

Integrating the Video Preview Playback Experience

To get an optimal video preview playback experience, we

  • Optimized video player creation
  • Simplified existing audio toggling behavior

Intuitive User Experience

Our main goal with the user experience was to allow our members to focus on each movie/series, understand what it is about, and avoid any friction from the interaction.

A very busy expanded title canvas
A title canvas which gradually fades out contextual information
Transition from the expanded title canvas to the title detail canvas
// inside of TitleDetails.jsxcomponentDidMount() {
  const playerService = this.context.videoPlayerService;
  const currentTimeOfExpandedVideo = 
    playerService.api.getCurrentTimeBySessionId(
      this.props.expandedVideoSessionId
    );  playerService.createVideoPlayer({
    startTime: currentTimeOfExpandedVideo,
    videoId: this.props.videoId
  });
}

Conclusion

Although we feel this is a great step forward in delivering more meaning to our members, we still see opportunities to make the website more effortless for content discovery and playback. In addition, there are more potential wins for members with low bandwidth and CPU restrictions by reducing payload and streamlining components.

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.