9 Comments

Summary:

Netflix has spent the past few years trying to get its streaming service on as many devices as possible, including TVs, Blu-ray players, game consoles, streaming set-top boxes, mobile phones and tablets. Its secret for doing so? Building experiences based on WebKit and HTML5.

netflix-ps3-streaming

Netflix has spent the past few years trying to get its streaming service on as many devices as possible, including TVs, Blu-ray players, game consoles, streaming set-top boxes, mobile phones and tablets. It’s a monumental undertaking, given the large number of different operating systems and development tools needed across a number of different CE manufacturers.

In a post on the Netflix Tech Blog, device UI engineers Matt McCarthy and Kim Trott shared a presentation that gives a peek behind the curtain in how it’s able to do so. The key is standards-based development using WebKit, JavaScript, HTML5 and CSS3.

Cutting-edge features, dynamic updates and A/B testing

Standardizing on WebKit enables Netflix to deliver nearly identical code to all new Netflix-ready devices. By basing its software development kit (SDK) for consumer electronics manufacturers on WebKit, it can also use “cutting‐edge features like querySelector API, CSS transforms, CSS transitions & animations, localStorage, CORS, getters and setters, etc.”

More importantly, by relying on common web technologies, Netflix doesn’t have to develop individual applications for each device framework it comes across. It also can improve development cycles for user interfaces on connected devices. According to the presentation, Netflix typically updates its connected apps every two weeks. By using web standards, it doesn’t need to rely on CE manufacturers to push firmware updates to fix bugs or change the UI; it can do dynamic updates by itself.

Netflix also can dynamically test user interfaces, to see how users interact with them. With web standards, it can redirect different customers to different web pages, feeding them different experiences. By doing so, it can figure out which interfaces are most effective.

Different classes of devices

There’s a wide range of available processing speed and memory, from CPUs that have 600 MHz to those with 3.2 GHz of processing power, and 88 MB of available memory to 512 MB. As a result, Netflix builds in flexibility to ensure it doesn’t overload lower-powered devices with more advanced features.

Netflix currently has three tiers of devices based on their configurations, with the lowest tier having zero animation and small cache sizes. On the top end, devices have animations, large cache sizes and frequent pre-fetching of data. According to the presentation, all devices start in the middle tier and are then throttled up or down based on performance.

Paving the way for other app makers

Netflix’s focus on standards has allowed it to provide dynamically updated user interfaces on devices like the Sony PlayStation 3 and Sony Internet TVs, Nintendo Wii, Logitech Revue and the Boxee Box from D-Link. As more streaming video app makers try to tackle the issue of device fragmentation, Netflix’s approach could provide one way to streamline app creation and maintenance.

  1. Daniele Calabrese Friday, September 9, 2011

    @soundtracker is doing the same for GoogleTV and Samsung SmartTV

    Share
  2. Makes total sense for Netflix to use Webkit to create custom players for oddball devices. BUT…

    I can’t see how standardizing on Webkit saves them on Internet Explorer or any other non-Webkit browser they have to support.

    Share
    1. Thanks Bob! Fixed.

      Share
    2. This works for cases where movies are streamed in a non PC/Mac environment. Think PS3, Wii, XBox, newer TVs. They all support modern browsers (webkit) and have none of the legacy issues.

      Share
    3. It ought to read NetFlix uses WebKit to standardize its *Applications* on multiple devices and platforms.

      Obviously they can’t standardize the Netflix *website* on WebKit support only, but they can use WebKit as the rendering engine for every Application they write.

      So while their website isn’t saved from Internet Explorer hits; they can create a NetFlix application for Windows 7 Phone, for Windows 7 Desktop, and Windows 8 (everything) that uses WebKit instead and may provide the user a superior experience.

      Share
  3. Is their video player on these devices also in HTML5? How do they DRM it?

    Share
  4. Why is their UI so crappy? this strategy seems great for the development team doing the work at Netflix, but did they manage to create the right UX for the user? Would you see this UI on an Apple device?
    The elephant in the room is UI lag and building on webkit means they are leaving performance on the table. Great job standardising to the Lowest common denominator.

    Share
  5. How do they handle DRM with webkit? do they implement their own player?

    Share
  6. Learn WebDevelopment Wednesday, September 21, 2011

    The combination of these two things namely the introduction of new attributes and the replacement of old elements give Html5 the ability to pass all tests and the certainty that it will be widely used. The new version is compatible to all older versions and can be installed to all browsers that use this type of documents. So if you think that it will help you work better, you should know that it doesn’t require any specific installation or download that might not be compatible to your computer. It is easy to learn Html5
    and it will certainly make your life easy, too.

    Share
  7. Netflix 에서 웹기술 적용하여 정리한 자료. 특히 첨부된 슬라이드의 performance 튜닝부분은 TV쪽 컨텐츠 제작하는 분들이 참고하시면 좋을 듯. http://t.co/oz5Aajmd #fb

    Share
  8. RT @manyoungc: Netflix 에서 웹기술 적용하여 정리한 자료. 특히 첨부된 슬라이드의 performance 튜닝부분은 TV쪽 컨텐츠 제작하는 분들이 참고하시면 좋을 듯. http://t.co/oz5Aajmd #fb

    Share
  9. RT @manyoungc: Netflix 에서 웹기술 적용하여 정리한 자료. 특히 첨부된 슬라이드의 performance 튜닝부분은 TV쪽 컨텐츠 제작하는 분들이 참고하시면 좋을 듯. http://t.co/oz5Aajmd #fb

    Share

Comments have been disabled for this post