Today we’re releasing several exciting updates to Hulu, most notably a new version of the Hulu video player. We’ve posted an overview of the new player, complete with an introductory video, here. And you can experience the changes for yourself throughout the site. Given the breadth of the changes, what I thought I’d do here on the blog is give more of a behind-the-scenes look at the thinking that went into the new releases.
Let’s start with the new Hulu player. Around the office we referred to this as Project Voltron after the ’80s animated TV series. Just as five robot lions combined to form Voltron in that show, many different components came together to make up the new Hulu player. A convergence of several forces — the availability of new technologies, lingering ideas from the product team, and user feedback — underlie this refresh of our player, but the primary motivation remained the same as always: elevate the experience of watching videos on Hulu.
Adaptive Bitrate Streaming
The new player is written in ActionScript 3, and among other things, that enabled us to launch adaptive bitrate streaming. Previously, we could downshift the bitrate of our video stream if we detected the user experiencing video playback issues for reasons like diminished internet bandwidth. With adaptive bitrate streaming, we can now shift video bitrates and resolution up and down continually to match the user’s bandwidth. In the hierarchy of video playback issues, we believe frame rate inconsistency or video stuttering is more disruptive to users than a decrease in resolution, and adaptive bitrate streaming is designed for that prioritization.
You can turn on adaptive bitrate streaming in our new video settings menu in the player. That menu also allows you to force the player to stream at a fixed resolution of 480p, 360p, or 288p, but we recommend that you select adaptive bitrate streaming. When it’s on, you can rest easy knowing Hulu is offering you the smoothest playback at the highest resolution possible for your bandwidth.
Ad Volume Normalization
Another feature that will improve the viewing experience on Hulu is one you can’t see, but will hear, instead: ad volume normalization. There’s a widespread myth that broadcasters and even Hulu would boost commercial audio levels, but it’s just that, a myth. In the past, we tried to normalize ad volume to content volume globally, but that wasn’t a perfect fix because content comes to Hulu with differing audio levels, and you can only raise the audio levels so much before you’re simply magnifying background noise. In particular, many masters for older titles have really low audio levels, and producing new masters is often impossible or prohibitively expensive.
Our new ad volume normalization feature handles volume adjustments on the fly. As our player approaches an ad break, it begins analyzing the audio level of the content. When the ad is called, the player compares the content’s most recent audio levels with a precomputed audio value for the ad and brings them into line dynamically.
Closed Captioning Display
For closed captions, we’ve added two new display options in addition to our original white text display, so now you can also choose yellow text, or white text on a solid black background. Each of the new options should improve the visibility of captions for most scenarios.
When you hover your mouse cursor on our new player timeline, we now display a preview thumbnail of that spot in the video. This should vastly improve the accuracy of seeking around in a video. Since seeking past an ad break can trigger an advertisement before the video resumes playing, we wanted to do as much as possible to ensure our users get to the exact moment they’re searching for on the first try.
If you don’t have an exact moment in mind but are curious to discover particular moments of interest within a full episode or full-length movie, we’ve now ported the heat map from our captions tab to the drop-down pane below the player. Captions and the heat map never had any intrinsic relationship, and this move allows us to display the heat map on all long-form videos, even those without captions.
The width of the heat map aligns to the width of the new timeline exactly. The heights of the bars in the heat map indicate the relative popularity of various sections of that video. Hover over any bar and the corresponding preview thumbnail will appear above the video timeline. Click on any bar to jump to that place in the video. The heat map in conjunction with the visual timeline adds another powerful tool to the viewer’s seek toolbox.
A Bigger, Sleeker Player
That’s a look under the hood of the new player. We’ve also refreshed the design. For starters, we wanted to increase the size of our base in-browser player. We no longer scale the 480p video down. At its native resolution of 720 x 404px, our new video player is 25 percent larger in viewing area than our previous player.
The default view of the player is now chromeless, meaning it’s clear of any controls, which gives it a cleaner look. The old Hulu player had a timeline visible at all times, but the new player displays the timeline only on mouseover and keeps the timeline height and width fixed.
The fullscreen button has shifted to the lower right of the player. The new location is also consistent across all the different incarnations of our player: regular, fullscreen, pop-out, embed, and off-Hulu (i.e. on our distribution partner sites like Yahoo). Many web video players have the fullscreen button there, and this control is used frequently enough that adhering to this unofficial standard location seemed prudent.
We’ve also renamed continuous play “autoplay” and have shifted the controls into the player itself. Previously those controls sat outside the player in a continuous play bar, but this feature generates enough usage to have earned a permanent integration into our player controls. At the same time, we’ve reduced the autoplay control footprint by replacing the “next video” button with the more universal icon for skip and by moving the autoplay playlist selector into a pop-over menu.
In the old player, we had a left and right column outside the player that held additional controls like pop-out or embed. These have all moved to the right of the player now. Since the player itself is bigger, menus for options like embedding or sharing videos have grown in size also. Rather than add more options with the additional real estate, we’ve left the controls largely the same as it lends a more airy, spacious feel.
You can still customize the start and end points of the video you share, as well as select a custom thumbnail for any video you wish to embed. With the increased timeline width in those menus, it’s easier to do so with precision. The one new option is the ability to select between two sizes of video player to embed.
We made a few other subtle design updates. When you pause a video, the buffer indicator is now at the top, and we now display the current video resolution to its left. In pause mode we used to display a large play icon in the center of the video player as a cue. We’ve shrunk that button, and after a few seconds of inactivity, it now fades out completely and only returns on mouseover. Lastly, our new player will shrink the video window down when it encounters end credits, devoting more player real estate to suggest other videos to watch. We can tell from view-through data that most users aren’t interested in the end credits. But if you are, you can still restore full-size view with one click. We won’t shrink end credits if the show inserts additional content after the end credits.
An Aside on HTML5
Those are the highlights of our new player. Before we move on to the other updates to our site today, let me address a related topic that’s been in the news a lot recently: HTML5. Plenty of users and members of the press ask about this topic all the time.
When it comes to technology, our only guiding principle is to best serve the needs of all of our key customers: our viewers, our content partners who license programs to us, our advertisers, and each other. We continue to monitor developments on HTML5, but as of now it doesn’t yet meet all of our customers’ needs. Our player doesn’t just simply stream video, it must also secure the content, handle reporting for our advertisers, render the video using a high performance codec to ensure premium visual quality, communicate back with the server to determine how long to buffer and what bitrate to stream, and dozens of other things that aren’t necessarily visible to the end user. Not all video sites have these needs, but for our business these are all important and often contractual requirements.
That’s not to say these features won’t be added to HTML5 in the future (or be easier to implement). Technology is a fast-moving space and we’re constantly evaluating which tools will best allow us to fulfill our mission for as many of our customers as possible.
That’s a look at the new Hulu player. Let’s turn to advertising.
Introducing Ad Tailor
The launch of the new Hulu player today also enables us to release a new ad personalization feature which we call Ad Tailor. The goal of Ad Tailor is to increase the relevance of ads for our viewers.
Ad Tailor works in two ways. One is that we now offer the user the option to give us immediate feedback on every video ad’s relevance. In the upper right of every video ad, we ask “Is this ad relevant to you?” and offer a yes and a no button. These buttons replace our old “thumbs up” and “thumbs down” buttons on ads. The new wording is deliberate since the thumbs up and down iconology might suggest that we were interested primarily in your subjective opinion of the ad creative when what’s more critical for us is understanding whether the product or service being shown is relevant to you. We can’t alter our advertisers’ creative, but we can control which ads we show you. We’ll use your feedback to adjust which ads we show you in the future.
Ad Tailor tries to improve ad relevance in another way. Occasionally, when you’re watching a video, we’ll also serve up a single or multi-question survey in place of an advertisement. Answer any single question and we’ll return you to your video immediately, and answer any multiple question survey and we’ll reward you with some ad-free viewing. Answering these questions is always optional, and any responses given will be kept confidential.
The more efficiently we can match ads up with users, the more everyone benefits. Users see more relevant ads, and advertisers reach a more targeted and receptive audience.
When we use Ad Tailor to personalize an ad we show you, you’ll see a brief visual cue at the start of the ad: in the upper right corner we’ll display “This ad brought to you by Ad Tailor.” The more feedback you provide, the more we’ll be able to personalize the selection of ads we show you.
One of the primary goals of the homepage refreshes was to add a new layer of personalization. If you’re signed in to Hulu, we’ll recommend shows just for you in the masthead at the top of the page. You can now change what we display in the left two columns of all three homepages through the dropdown header, and we’ll retain your preferences from session to session. We’ve added a My Videos section to each homepage that allows signed-in Hulu users to look at their queue, subscriptions and viewing history without leaving the homepage. At the bottom of all three homepages, just above the footer, we’ve added a recommendations carousel. If you’re signed in, we’ll recommend shows based on your past viewing, but if you’re not logged in, we’ll pull from a long list of our favorite shows and movies from our catalog.
Other changes to the layout of the homepage balance what we’ve learned from user behavior on the site and what we’re interested in helping users discover in the months to come. Like many sites, we’re constantly striking a balance between surfacing what users already like and what they don’t know they will like. With our catalog having grown to hundreds of content partners and thousands of titles, the most efficient way to do that is evolving.
Here in Los Angeles, where the weather seems to be sunny every day, it’s easy to lose track of what season it is. But we like to think of this as a spring refresh. As always, your feedback is welcome.
Eugene Wei ()
VP of Product, Hulu
Update: We have started a discussions thread for updates from our support team here.