Hulu Media Player

Player in built in Adobe Flex

Hulu Player
The Hulu video player is really well designed in that it is very understated and allows the video to take center stage. The controls are semi transparent and fade away when a user no longer has their mouse on the video.

The main flaw I believe with the Hulu player is that the videos are played in a traditional html manner, meaning a user needs to load a new page to look at the catalog of videos or to view a new video. My approach is a more traditional television guide approach, so a user never has to stop playing the video they are watching to browse for more videos to watch.

Hulu Media Player
Hulu CTO Eric Feng has said “The company is considering making a self-service model for its player so that a fan site for the

Office, for example, could embed the entire library of the show. “

I completely agree with Eric, a video player that is capable of multi video plays is necessary for Hulu because the main complaint against embedding individual videos is that it causes the page to have endless scrolling.
I believe Hulu needs to have an embeddable player unlike that of a Youtube, mainly because players like that are meant for webpage viewing of short length videos and are not scalable to contain large volumes of videos.The only possible way for players like that to scale is to place it in a site that scales. My approach not only lets you have a “Prison Break” multi video channel player, but a multi show player that contains x number of videos all while having a TV like experience.

Integrating Hulu videos into my media player was technically a few lines of code. The difficult part was figuring out how to integrate my media player with the Hulu player and not affect their brand. The answer I came up with was to a add one semi transparent buttton similar to their design to the top part of the menu bar. Whether this button lives within the x- y coordinates of the application as it does now or as html code as links below the player as Slide applications do, is technically the same.

Hulu Videos
Navigation is meant to be simple and easy to use and also be similar to most multimedia devices on the market today. When the user clicks the “Show Guide” button the user is presented a main menu – currently it is a listing of the shows on Hulu. If a user clicks on a show such as “30 Rock” they would then be presented a new menu that contains a listing of “30 Rock’s” episodes.

Hulu videos are full length and of high quality and include shows such as Prison Break, The Office, 24, Heroes, House, Battlestar Gallactica, My Name is Earl, The Simpsons, King of the Hill, Family Guy, Bones, Journeyman and Project Runway and many many others.

My menu system easily allows you navigate back and forth between the show list and the drilled in episode list. Every menu item whether it be a show or an episode has a representative thumbnail. To improve quality I am using the high quality version of Hulu’s images.

Mini video
My solution to being able to navigate the menu system and view videos is done by simply resizing the Hulu player and placing it in the lower part of the screen all while the video continues to play. If a user wants to play the video fullscreen again they can either click on the video or hit the “Close Guide” button to return.

Hulu and Menu

See thru
One approach I thought of to have the ability to navigate and view the video would be to keep the video in it’s full size and simply overlay my mediaplayer over it. The varying scenes of the video with the menu made it have a very three dimensional feel and look more like a video game.
I really liked this approach but it is very non-standard, so I went with the more traditional approach. Awaiting feedback from select folks and perphaps may go into a settings menu.

Note: Currently not in the build, waiting on feedback.

Commercials
The Hulu player starts all videos with an introductory 5 second animation. It is very nicely done and does not interfere with the user experience. With Hulu’s desire of embedding videos as a major part of the plan, I believe this is a clever and necessary move to keep emphasizing their brand.

Note: The Hulu player has not been modified in my media player and all “commercials” play as expected.

Ads
I am not too big a fan of this ad style, simply a static graphic with audio repeating the text in the graphic. The player does provide how many seconds remain for the ad to complete on the top header, so from a usability perspective this is well done.

Note: The Hulu player has not been modified in my media player and all “Hulu graphics with Audio ads” play as expected.

Ads
The Hulu player provides full video commercials making their player truly seem like a television experience. I believe they can get away with ads such as these because they are presenting full length high quality shows.

Note: The Hulu player has not been modified in my media player and all “Hulu video ads” play as expected.

What Now
As far as legality, Hulu has stated “we encourage the viral distribution of Hulu content in accordance with our terms of use.”

The terms of use for hulu.com include at least two possible issues: the embeds are supposed to be for personal, non-commercial use and the content is supposed to remain in Hulu’s player. My media player conforms with their terms of use.

The community has been asking me for an embeddable player, let’s see how this player is received.
I know I will be asked if this player could be combined with the feeds from my other players (shown above) which has content from the top web sharing sites such as Youtube, Google Video etc. Technically it would be no problem.
Could this be made into a facebook app. Yes.

I am more concerned in building out a framework that has access to all web video content and be accessible not only on the web, but on television.