Paul Yanez » video

Fluid Layout Silverlight Video Player Part 1

admin — Thu, 29 Apr 2010 04:17:33 +0000

In the following tutorial we will begin building a fluid layout for a Silverlight video player.
The main goal is to allow the scaling of the middle section of controlbar which houses the progressbar to scale according to the width of the player. The left and right columns will remain a fixed size. There should be no loss of quality of the graphic assets of the controls and the position of each control should remain relative of it’s container at all times.

Steps
1- Build a wireframe of the containers you are trying to scale and have as fixed sizes
2- Use the Grid component as your layout component
3- Areas that you want to remain a fixed size, set the “ColumnDefinition Width” to a numerical value – ex: the pause component is fixed – ColumnDefinition Width=”50″
4- Areas that you want to scale, set the “ColumnDefinition Width” to “*” – ex: the middle section which contains the progressbar

Use the slider below to see the fluid layout

Wireframe of the videoplayer and the scaling we want to achieve

XAML code

The controls in this tutorial are not functional, the controls are simply meant to be placed with a fluid layout. The following are tutorials on building a video player
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

Building the Time Slider control for your Hulu inspired SilverLight video player

admin — Sun, 06 Dec 2009 15:19:23 +0000

This is part 6 in our series of building a Hulu inspired video player. In this tutorial we will be building the slider time display control.

We will take the static design of UI design

1- Replace a slider of type hSlider
2- Replace the design elements

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public double barSize;
		System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();

		public hulu_player()
		{
			InitializeComponent();
			myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
            myDispatcherTimer.Tick += new EventHandler(setTimeControl);
            myDispatcherTimer.Start();
		}

		private void setTimeControl(object o, EventArgs sender)
		{
			current.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.Position.Hours, mp.Position.Minutes, mp.Position.Seconds);
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{

			total.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.NaturalDuration.TimeSpan.Hours, mp.NaturalDuration.TimeSpan.Minutes, mp.NaturalDuration.TimeSpan.Seconds);
		}
	}
}

Loading external video into your Hulu inspired Silverlight video player

admin — Wed, 11 Nov 2009 12:47:41 +0000

This is part 2 in our series of building a Hulu inspired video player. This tutorial may well be the most important in the process of building a Silverlight video player.

In our previous example “Building a Play-Pause control for a Hulu inspired SilverLight video player” the video was included within the Silverlight file. This caused a very bad user experience because the user had to wait to load the entire video before the file was shown.

By setting the video source to be remote, the Silverlight file is now 14k as compared to 6,700k. Now, the Silverlight file which simply contains a MediaElement is loaded almost instantaneously and the video plays as it loads.

You can play and pause the video

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}

Creating thumbnails of video frames with WriteableBitmap in Microsoft Expression Blend 3

admin — Sat, 07 Nov 2009 08:03:44 +0000

Click on video to create thumbnails
The following example shows how to create thumbnails by using the WriteableBitmap class.

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace ImageSnapshot
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void takeSnapShot(object sender, MouseButtonEventArgs e)
		{
			WriteableBitmap snapShot = new WriteableBitmap(myMediaElement, null);

			Image image = new Image();
			image.Height = 89;
			image.Margin = new Thickness(10);
			image.Source = snapShot;

			thumbs.Children.Add(image);
			scroller.UpdateLayout();
			double scrollPos = thumbs.ActualWidth;
			scroller.ScrollToHorizontalOffset(scrollPos);
		}
	}
}

Creating a Silverlight video player in Microsoft Expression Blend 3

admin — Mon, 26 Oct 2009 03:20:32 +0000

This video will show you how to add a video player in Microsoft Expression Blend 3. Adding video to Silverlight projects ia as simple as placing a media element control from the assets panel on the stage and setting the media element’s source to a video file.

Joost Media Player

admin — Thu, 13 Aug 2009 21:42:43 +0000

Download Player

Player in built in Adobe Air

Joost Media Player is an Adobe Air application that gives users the ability to view Joost.com’s extensive library of television shows, music and movies. The player has over 400 television shows, a library of over 10,000 music videos and a large selection of film.

Joost Media Player Twitter Integration

On install of Joost Media Player you can enter your Twitter credientials and the player will auto-update your Twitter account. This feature can be accessed by clicking on the Twitter icon on the menu bar. Once clicked a new window will launch and you will be able to have a video and Twitter experience at the same time.

You can also search Twitter, by default the search term Joost is selected to let you see what others are viewing. You can also enter any search term you like. If you want to view your own Twitter timeline you simply click on the friends tab. There is a settings tab allows you to change whether you use the Twitter feature or not.

Joost API

Joost has an open API which developers can easily utilize to build their own experiences.

In the fullscreen player I utilized the Joost API to allow users to use their remote control to play the next or previous video and pause or play the video.

Joost created a custom data feed for Joost Media Player, many thanks to Allan Beaufour on the Joost engineering team for all his hard work.

Joost Media Player – Guide

The guide screen allows you to scale the player so as you increase the size so more shows are viewable. This is a major limitation to most sites viewed on the web, which are usually fixed in size and is built to go page to page. On a 30 inch monitor you will be able to view 144 shows at a glance.

The top left side of the player navigation
has three buttons “Shows, Muisc, Film”, clicking on them will show you 500+ TV shows and a library of over 10,000 music videos. The left side navigation allows you filter by categories such as Comedy, Drama etc.

Joost Media Player – Picture in Picture

A major limitation of all video websites is the inherent nature of the web which is to force the user to go page to page. Thus a video stops playing when a user wants to search for content or navigate the site. Joost Media Player has continuous playback of video wherever the user decides to go.

Joost Media Player – Show Details

Clicking on a show from the guide will take you to the show screen which has the episodes that are available.

This view will show you the air date, run-time, description and a thumbnail of the show. Clicking on a video in the bottom pane will play the video in the top pane.

Joost Media Player Fullscreen

The most requested feature to be added to my players in the past year has been to support full screen viewing.

On the guide screen, a tv icon on the top bar has been added. Clicking on this icon will launch the player into a TV mode style interface.

Users do not have the ability to use a mouse once you click on this icon. The purpose of this is act as a true 10 foot UI and navigate by either remote control or arrow keys on the keyboard.

A recently added feature because of the Joost API is to control the player while in TV mode. If a user selects CSI and it has 25 episodes the user can forward or back thru the episodes without the need to go back to the episode listing.

Joost Media Player TV mode TV lineup

Clicking on the tv icon will launch you to the fullscreen mode. Depending on whether you were viewing the TV or Movie guide will launch the list of TV or Movies. In this view the userwas in TV mode and now is presented a list of hundreds of TV shows.

To navigate up or down one at a time use the up or down arrows, if you would like to page up or down, simply click on the page down or page up buttons or the left or right arrows.

To get to the next screen press “Enter”

To go back one level press “Backspace”

To close the fullscreen view press “Esc”

Joost Media Player – TV mode details

Selecting a TV show will then display a list episodes from that show, with title, thumb, length and description.

Joost Media Player – Fullscreen Video

Selecting an episode will take you to a fullscreen view of the episode.

Hulu Media Player

admin — Thu, 13 Aug 2009 16:05:22 +0000

View Player

Player in built in Adobe Flex

Hulu is is a joint venture of NBC Universal and News Corp. Providence Equity Partners has also made a USD$100 million equity investment and holds a 10% stake in the company. The partnership was announced in March 2007 and the name “Hulu” was chosen in late August, when the website went live. The service offers full-length episodes of NBC and FOX television programs, including shows from the Bravo, Fuel TV, FX, Sci Fi, Style, Sundance, and Oxygen channels.

Hulu has been getting lots of press as of late. Most of it is due to the fact that Hulu is in a closed beta and not accessible to the masses and nobody outside of the United States. Currently there are several solutions to the problem, Openhulu has made a website featuring all of Hulu’s content by embeddeding each player on it’s site. TVParadise figured out the workaround to the non American issue, and Veoh has recently become a hyper-aggregator showcasing Hulu content. Hulu videos are being distributed through a partner network that includes AOL, MySpace, Comcast, MSN and Yahoo.

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.

Joost Beta 1.0

admin — Thu, 13 Aug 2009 15:08:14 +0000

View Player

Created in 2007, some videos may not play

Joost Beta 1.0
Two months ago I published my first Joost Flash Mashup and
since then went on to create applications for AppleTV, Flickr, Babelgum,and the Nintendo Wii (out already-publish next week). I haven’t seen Joost in 2 months, then I read how Beta 1.0 just came out and decided to download it. These screens are the changes made on top of the original. Also 99% of all the graphics have been drawn custom in vector in anticipation of having these applications truly run in a TV.

New Design
The major change to Joost Beta 1.0
is the redesign. The main screen still has the same components but these components have been given a new polished look, and shows Joost commitment to developing a great product.

Content vs Users
Joost has added alot of content in the last several weeks.
In the last several weeks I have been really looking into Youtube and what makes it tick. The real engine behind YouTube is it’s users.The user’s do amazing video work and are marketing gurus, for instance user LisaNova has 72,748 subscribers and just did a video mashup with Perez Hilton. I would rather watch LisaNova than another video I already saw on MTV, just check out “Affirmation Girl…The Date from Hell” and try not to laugh out loud. Also there is no way any content acquistions per month could possibly keep up with the amount of new content YouTube gets every hour.

Dynamic Application
Moving forward all my applications will have the ability to easily tap into user accounts on most web services. The first is YouTube, if you are a YouTube author and have uploaded videos than you simply enter “?author=username” or if you have never uploaded videos but have a favorites list, then you would enter
“?favorite=username”
or possibly you don’t have a YouTube account, you can still do a random search “?search=search term”. This simple feature allows users to view the application with their own videos,and not be tied into a closed system.

User Integration
Not only can you enter in the info into the address bar, but user integration is built into the application. The users are growing at an alarming rate as the system is self learning and grows as it is being used. The feedback from the community as far as feature recommnedations, embeddable player requests has been awesome.

Fullscreen Support
Joost has the ability to go fullscreen even on 30 inch monitors, the Flash version supports the same capability.

Widget Support
Joost made a major change to their widget windows, scaling them down and only making them normal size when you actually use them. I suppose this comes in anticipation of developers creating new widgets and users having too many on the stage at one time. I do not agree with this and the Flash widgets are always their normal size.

Right Click Support
Several weeks ago Joost did not support right click functionality, the Flash version has several more options and has supported this functionality for several months..

New Explore Menu
After the new design I believe the next major overhaul is the “explore” menu. This is so far superior to the previous menu system and is definitely a step in the right direction, as content grows the scalability of it will be tested. The flash version supports this functionality and has eliminated the old style menu.

Drag and Drop Support
Joost now supports the ability to drag and drop videos into a container which can be made into a custom channel. I am very interested to see if most users will get it and actually use this really cool feature. The flash version supports this feature.

Zoom Capability
The explore menu allows users the ability to zoom in and out the thumbnails. The flash version also has this functionality but does it in realtime without having to reload the thumbs everytime the slider is dragged.

Old Design
Joost Beta 1.0 still has the old design in several major parts of the application, the new design is far superior, so seeing two distinct styles in the same application is odd.
The flash version has removed the old menu system entirely.

Flickr Video

admin — Thu, 13 Aug 2009 09:49:07 +0000

View Player

Created in 2007, some videos may not play

Flickr is a photo sharing website and web services suite, and an online community platform, which is generally considered an early example of a Web 2.0 application.

In addition to being a popular Web site for users to share personal photographs, the service is widely used by bloggers as a photo repository. Its popularity has been fueled by its innovative online community tools that allow photos to be tagged and browsed by folksonomic means. Flickr has a repository that is quickly approaching 1 billion images (as of August 2007).

Here is a common user case scenario:

Flickr user goes on vacation, comes home, has hundreds of beautiful pictures on his camera, he uploads those images to his Flickr account. User also has video from the trip, Flickr doesn’t support video, user needs to go to another service. This is the problem with most Web 2.0, all services do a very good job at a task but no one provides an end to end solution for users.

Talk of Flickr having video support has been in the air for quite some time, the latest was Michael Arrington’s article on Flickr video.

Images for Flickr screens 2,3,5 are from Manganite.

Original Flickr Interface Support ++

The interface that made Flickr famous is no longer supported.

I really liked that interface, so I decided to bring it back, with a few additions. The cool thing about it was the user was able to view dozens of thumbnails at a time, I added the ability for the user to grab a divider and extend the viewable area to hundreds of videos.

The user is able to view 208 thumbs and in one click view a video. In my opinion the design of the previous interface was far superior to the current design, it was a big mistake to discontinue this interface.

It boggles my mind why big corps think they know better and not roll out enhancements and see what users like, instead of pushing completely new things out.

Ability to switch between old school and new school and hide and show…

Users are able to click on the options button and very easily switch between old and new school interfaces, hide and show info and thumbanils components.

Preview video on Rollover!

Flickr supports a thumbnail preview of the small image on rollover, my version supports the ability to play the actual video on rollover.

This is an awesome feature which allows the user to have PIP type interface on rollover.

Fullscreen Support

The flickr version does not allow users to resize the window, if you try, good luck, it doesn’t work. My version allows user to not only resize, but go fullscreen. This screenshot is on my 30 inch monitor.

I really like the layout of the components at this size.

Video Info Support

Flickr supports image info, my version does also. Users are able to view title, description and link to original video page.

Keyboard Support

My version is able to controlled by keyboard interaction.

Multiple Site

I wanted to add the ability to navigate multiple sites, but not add unwanted design elements to the application. I am very happy with the non intrusive component which allows the user to switch between sites in one click.

Apple TV

admin — Wed, 12 Aug 2009 13:50:44 +0000

View Player

Created in 2007, some videos may not play

Not AppleTV is a web based application that allows users to have the same experience as they would when purchasing an AppleTV device. A few enhancements have been added, features such as a “History” and a “Favories” list have been implemented.

AppleTV cannot be viewed in a browser, it must be purchased. Therefore I believe makes it even less accessible than downloadable clients such as Joost and Babelgum. I believe Apple with it’s resources should provide the mass audience with at least a minimal interatcive experience of their application, which will be a better experience than showing a Quicktime movie. I want to point out that I am not seeing this is as replacement, but I believe web applications will extend and enhance the experience to users, I can almost guarantee most users will not have access to their Apple TV at work.

The flash based version does not need to be downloaded for continuous updates, it works in all browsers on all operating systems. All enhancements and upgrades are transparent to the user and the application continues to retain the user preferences since the application is hosted on a server.

The next step is to extend the application from simply being a video player to a multimedia player and add images from Flickr or the user’s local machine, add RSS feeds from the top blogs, a social text and webcam chat component, and finally to add Music from radio stations or the user’s local iTunes/Windows Media Player directories.

I have also developed mashups for Joost and Babelgum.

A Flash mashup that has the same functionality as the AppleTV device plus utilizes RSS feeds from the top web sharing sites such as YouTube, Google, MySpace, Digg, BlipTV, MetaCafe, IFilm, Pornotube, DailyMotion, Break, Grouper, Heavy and Guba.

Users have the ability to navigate the application via keyboard or remote control.

All graphics have been created in vector thereby porting to mobile devices, Nintendo Wii, Sony Playstation3 or Windows Media Center will be seamless.

The user has the ability to change the UI in terms of color, layout, control type, viewing and hiding information thru a control panel.

Video List

Users can either use their mouse or remote control to navigate thru the various lists of videos. Most sites and categories will have hundreds of new videos added daily.

Fullscreen Video

The fullscreen portion of the application has the video playing with the iTunes controls on the bottom. A added featue is the details of the video appearing on load of a new video.

Users also have the ability on this screen to add the video to a “favorites” list.

Interchangeable controllers

Users have the ability to change controllers if they desire. This controller is based on the iTunes look and feel and allows the user to freely move the device on the screen and dock anywhere they please.

Categories of Videos

The application has the following ” Categories” list – Classic TV,
Documentaries,
Ha Ha,
Muisc HipHop,
Muisc Hindi,
Music Hits,
Muisc Indie,
Network TV,
News,
OMG Cute,
Politics,
Science & Nature,
Sports Extreme,
Talk & Chatter,
Technology,
Toons,
Video Blogs, and
Web Shows.

History of Videos

A feature not included with AppleTV is the ability to track and save the viewed videos, thereby creating a History list. This is transparent to the user and allows the ability to find a video quickly in without going thru thousands of videos.

The user has the option to have continuous play of videos while navigating thru the apllication, which is shown here at the bottom left. Or they can switch the option to be off.

Favorite Videos

Users can with one click save videos to a favorites list which is maintained through different browser sessions.

Settings Control Panel

The application has the ability to change settings in real-time. Features such as changing background colors, hiding and showing video details, changing alignment of the application from left to right, switching video from color to black and white, having a continuous play of the video or not, switching controls in the fullscreen mode from docked to undocked.

Change UI Layout

Users have the ability to change the layout on the fly. If you are more accustomed to reading left to right, no problem. With one click users can modify the layout, this screen shows a setting of UI Alignment “LEFT”.

Show Video Details

By default the flash application does not show video details below the image, however users who choose to have it, can. The three items if available are title, description and length.

Babelgum

admin — Wed, 12 Aug 2009 13:00:35 +0000

View Player

Created in 2007, some videos may not play

Who’s building Babelgum?
Babelgum is software developed by Babel Networks, a venture of Silvio Scaglia (one of the founders of FASTWEB) started in 2005 with the aim to develop interactive software for distributing TV shows and other forms of video over the internet using peer-to-peer TV technology. Babelgum has raised $13.2 million, that entire sum has come directly from its founder and Chairman, Silvio Scaglia.

Erik Lumer – Founder
Mallku Caballero – CTO
Michael O’Callaghan – COO
Silvio Scaglia – Founder and Chairman of the Board
Valerio Zingarelli – CEO

Whats Babelgum
Babelgum is a new way of conceiving television, a free on-demand TV over the Internet that lets you watch whatever you want, whenever you want as often as you want.

Technology
As the platform uses peer-to-peer technology, the quality and reliability of the streaming remains consistent regardless of how many users are currently watching, each serving as a node, simultaneously uploading and downloading content to peers in the network.

Goal
Is it possible to build a web based application that does not require any downloads, that is comparable to the downloadable executable Babelgum application. This mashup has been done with 1 flash file as compared to Babelgum which requires 100’s of files. The following are screens of Babelgum vs. my Flash version. As compared to Joost taking one month to develop, this application was completed in one week, is 40% the size of Joost and more functionality.

Browser support overview

Babelgum does not support browser based viewing, to use the application it must be downloaded and installed and only works on Windows. The flash based version works in all browsers on all operating systems and plays immediately. All enhancements and upgrades are transparent to the user and the application continues to retain the user preferences since the application is hosted on a server.

Menu overview

The Babelgum menu supports 3 options – “TV”, “Video” , “Close”. The flash version supports the 3 options available on Babelgum and also “Favorites” and “History”, users are able to click a plus sign on the menu list and also the details page to add a “Favorite”. “History” is transparent to the user and gets added when the user views a video,both options are continued between sessions. All the graphics for the Babelgum flash application has been created in flash and is vector based. This will allow the ability for this application to be ported to mobile devices, Nintendo Wii, Sony PSP to be made seamlessly.

Controller overview

The Babelgum application controller resembles a DVD device. It has the capabilities of play, pause, next, previous, mute, volume up/down, fullscreen, maximixe video and real-time video, and the ability to sort thru different sections. The flash version has all the capabilities as the Babelgum application.

Content overview

A major drawback to Babelum is the limited content available to it’s users since it’s model is to distribute videos through content deals. The flash version utilizes RSS feeds from the top web sharing sites such as YouTube, Veoh, Google, MySpace, Digg, BlipTV, MetaCafe, IFilm, Pornotube, DailyMotion, Break, Grouper, Heavy and Guba. With archiving capabilities, the number of available videos are in the hundreds of thousands. Since the videos for the flash version are derived from multiple web sources the content is growing exponentially.

Favorites & History overview

Babelgum does not have a concept of Favorites or History, the flash version does. On the flash version users are able to add favories and a history list is built while users view videos.

Video overview

The video view of Babelgum without the main menu is identical to the flash version.

Fullscreen overview

Babelgum does not allow the dynamic resizing of itself, it only has 2 size states. The flash version has no performance issues and resizing happens in real-time. This screen here shows on a monitor of 30 inches and looks as crisp as it would on a mobile device, and unlike Babelgum supports all sizes in between.

Mute Capabilities

Babelgum provides the abilty to mute the video. The flash version has the same functionality.

Volume Capabilities

Babelgum allows the ability to control the volume in the controller. The display of the volume in shown in the middle of the application. The flash version has the same capabilities.

Video overview

The Babelgum video setion is mapped to my Categories section. The Babelgum video section is not a list of videos but a hack at a favorites list. I saw a better opportunity to have a “Categories” list which contains the following – Classic TV,
Documentaries,
Ha Ha,
Muisc HipHop,
Muisc Hindi,
Music Hits,
Muisc Indie,
Network TV,
News,
OMG Cute,
Politics
Science & Nature
Sports Extreme
Talk & Chatter
Technology
Toons
Video Blogs
Web Shows.

Video details overview

Babelgum has basic features in its video details page, the flash version has all the capabilties as Babelgum plus a link to the original html page and a download link to the video, etc.

TV overview

The “TV” section of Babelgum maps to “Babel Picks”,
“News”, Trends”, ”
Muisc”, ”
Rushes”, “Doc”, ”
FIB”,
“Sport”, ”
Gong”, ”
Lifestyle”, ”
Fiction”, ”
Animation”, . While the flash application maps to “YouTube”,
“Google”, ”
MySpace”, “Digg”, “Break”, “iFilm”,
“Heavy”,
“Blip.tv”,
“Metacafe”,
“Guba”,
“UFC”,
“Pornotube”. I am not going to try to be nice like I was with Joost, but how can you compare Babels Picks with Youtube? The ability for my application to absorb thousands/millions of more videos is evident.

Loading screen overview

The loading screens of both applications are identical.

Joost Desktop

admin — Mon, 10 Aug 2009 01:37:23 +0000

View Player

Created in 2007, some videos may not play

Niklas Zennstrøm and Janus Friis have been talking about the idea behind Joost for a long time. In early 2006, they started gathering the world’s best engineers, web gurus and media visionaries to start building it, under the code name of The Venice Project. More than a year of very hard work later, their vision is ready for public viewing.

In that time, Joost has grown from a handful of people in a small office outside Amsterdam to more than 100 people spread right across Europe and North America. Joost is already a global venture, bringing TV to a global, highly networked community. And already, it’s setting new standards for 21st-century entertainment.

Co- founder – Janus Friis http://youtube.com/watch?v=tpiUDppHi7I
Co-founder – Niklas Zennstrom http://youtube.com/watch?v=tlh7_-yErJQ
Head of Engineering – Sander Striker http://youtube.com/watch?v=KaXdb-3ShjQ
Head of Technology – Dirk http://youtube.com/watch?v=Tf2CcIjygC4
Executive Vice President – Henrik Werdelin http://youtube.com/watch?v=fjDsRvZMaXE

Whats Joost

Joost is a new way of watching TV on the internet. With Joost, you get all the things you love about TV, including a high-quality full-screen picture, hundreds of full-length shows and easy channel-flipping.
Joost provides a new way of watching TV that combines the best of full-screen television entertainment with the interactive and community benefits of the Internet to bring broadcast-quality video to viewers anytime, anywhere. Based on a state-of-the-art, secure, peer-to-peer streaming technology, Joost can be accessed with a broadband Internet connection and offers video content to viewers for free. Joost features more than 150 channels with programming across all genres, including: cartoons and animation; entertainment and film; sports; comedy; lifestyle and documentaries; and sci-fi. Channels and programs available on Joost vary by geographic region, based on copyright ownership.

Technology

The app is based on Mozilla’s XULRunner engine, which basically means it’s cross-platform.
Joost is built on open source technology and open standards. To name a few: Mozilla, Apache HTTPD, Redland, Postgres, OpenSSL, RDF, SVG, XUL.

Goal

Is it possible to build a web based application that does not require any downloads, that is comparable to the downloadable executable Joost application. This mashup has been done with 1 flash file as compared to Joost which requires 100’s of files.

Browser support overview

Joost does not support browser based viewing, to use the application it must be downloaded and installed. In the last several months users have been forced to continually download and upgrade the Joost software in order to continue using Joost. The flash based version works in all browsers on all operating systems. All enhancements and upgrades are transparent to the user and the application continues to retain the user preferences since the application is hosted on a server.

Channel overview

A major drawback to Joost is the limited content available to it’s users since it’s model is to distribute videos through content deals. Joost features more than 150 channels with programming across all genres, including: cartoons and animation; entertainment and film; sports; comedy; lifestyle and documentaries; and sci-fi. Channels and programs available on Joost vary by geographic region, based on copyright ownership. The flash version utilizes RSS feeds from the top web sharing sites such as YouTube, Veoh, Google, MySpace, Digg, BlipTV, MetaCafe, IFilm, Pornotube, DailyMotion, Break, Grouper, Heavy and Guba. With archiving capabilities, the number of available videos are in the tens of thousands. Since the videos for the flash version are derived from multiple web sources the content is growing exponentially.

Playback overview

Joost is based on P2PTV technology. The Joost P2P technology isn’t always reliable, however, as some users report getting a “This program is unavailable right now. For some reason we can’t show you the program right now. Sorry about that. Try again later or try another program.” after waiting for a few minutes for programs to start. When this happens with one program, it frequently happens with all programs. The flash version load time is practically instantaneous, there is also a built in mechanism on the backend system to perform an hourly check to ensure videos are still available to avoid issues Joost is currently having. On the front-end detection has been implemented which will skip the video if a stream is deteced as unavailable,. thereby not casuing the player to be in a frozen state.

Video quality overview

Joost’s claim to be the new TV also comes with the claim of high quality video. Granted some videos are of high quality but it is also true that some are not. The videos for the flash version are also a mix of high and low qualitity video. But over the last six months the quality has significantly improved with web sharing sites realizing that the brand of it’s company is the video.

Video overview

The videos within a channel are presented in list view. The flash version has the same functionality as Joost.

Video info overview

Joost provides a video info panel that dynamically slides out from within the controller once the user clicks on the “i” button. Details within the panel are video name, description and video link, a “copy link” button is also provided. The flash version has the same functionality as Joost with one additional control. A “close button” has been added since most users will have difficulty realizing to close the panel would require clicking on the same “i” button that opened the panel. The transparency of the panel has been significantly decreased since the area that this occupies is right in the middle of the video. Changing the transparency allows the functionality of the panel while maintaining the ability to more clearly see the videos.

Help overview

Joost provides a help interface containing keyboard shortcuts, menu info, tooltips info. The flash version has the same functionality.

My Joost menu overview

Joost provides a menu to add widgets to the interface. Widgets include: news ticker, instant messaging, a clock, invite friends, rate it, channel chat, advanced settings and blog this. The flash version contains all but 2 widgets, due to the the usefulness of the 2 widgets. One widget it contains that Joost does not have is the webcam chat widget.

Widgets overview

A Joost Widget is a bundle of information that provides Joost viewers with a new facility of some kind, extending and enriching their TV experience. Some examples include a news-ticker, chat and rating tools, and an alarm clock. Widgets can be selected, enabled, and updated from within Joost. They may be stand-alone, or depend upon externally provided sites and services (for example bookmarking services, data services). The Joost Widget framework combines stylish user interface facilities with sophisticated data storage, access, and manipulation tools. Data can be stored locally or on the Web, and widgets can be given access to information about the current program being viewed, as well as interact with viewers via mouse, keyboard, or their remote control. The widgets have a transparency applied so that users are not totally blocked out from viewing any part of the video, widgets can be closed, dragged and moved, and docked in place. The flash version has support for all but 2 widgets, however it does have 1 widget that Joost does not support which is the Webcam chat widget. Users will be able to talk to each other by way of video and not need to type, isn’t this the whole idea behind “interactiveTV”.

Limitations overview

Joost has major difficulties performing certain tasks unless the application window is in fullscreen mode and also when the user tries to resize the Joost application. Some features that are not enabled are “Widgets”, Joost doesn’t even try to run them, a message box in opened and prompts the user to go fullscreen. If a user is in any of the menu windows ( channel, video, search ) and the user resizes the window, the application leaves that screen and automatically goes back to the homepage. Performance becomes an issue when users are resizing the Joost application, the video and components freezing is common. The flash version do not place any limitations and is able to perform all tasks at any resolution, performance is not an issue when the user scales the window.

Chat application overview

Without a doubt the most useful of all the Joost widgets is the text chat widget. Functionality includes the ability to chat with multiple users, embedding icons within your messages, ability to choose a custom nickname, list all people chatting, ability to join other rooms. Issues with the widget from Joost.com forums include the following, the current channel chat widget is for channel chat and not program chat. The mouse pointer does not work within a line of text you have created- only scrolling up/down and using arrows works to move text around before sending a message. Clicking a mouse within a line of text brings it to the end of that line only. There are Issues with basic cut and paste functionality into the textfield. The design of widget is again not consistent with other components. So while the usefulness of this widget is undeniable, the inconsistency of the widget within the Joost application and major functionality expected within a chat application leaves much to desired. The flash version allows users to text communicate with each other and is built utilizing Flash Media Server with capabilities for 2,500 users to simultaneously talk with one another. This component within flash will see a dramatic development shift from the current Joost idea of what a text chat widget is.

Personal profile overview

Joost provides an interface to allow the editing of your personal profile, users have the ability to update their first name, last name, date of birth and gender. The issue I see on this component involves the design, it does not follow any of the standards for font size, window size, layout etc. This seems to happen on teams working on large scale applications, a lone developer not following the standards set by the design team and developing their own design. The flash version has all the capabilities of the Joost version and leverages off the widget framework and is thereby consistent with the rest of the application.

Player resize overview

Joost has major issues with performance on resizing the window. The flash version leverages from the controller framework and presents an interface consistent with the application. There are no performance issues and resizing happens in real-time.

Search & controller functionality overview

The controller contains most of the functionality of the Joost application. Users can pause, play , play next, play previous, change volume state, change channels, get video info, get channel info, seek help, edit user profile, go fullscreen and search. When the user enters a search term the search menu is shown. The flash version supports all the functionaliy of the Joost application. Enhancements made in the flash application are due to increase usability: enlarging all the buttons, enlarging text for enhanced readability, setting different transparencies for each section to separate actions.

Site details overview

Each video is part of a channel, the details of each channel can be accessed by clicking on the top center button. The flash version supports all the fucntionality as the Joost application. The design of the window has been changed to match the rest of the application, also a close button has been added to allow users to exit the window. Or Joost users would have to figure out that the button on the top right of the application is the way to close the window.

Right click overview

Joost does not support right click functionality. The flash version has right click functionality for the following: link to Joost.com, Edit your peronsal profile, Switch between full-screen and window mode, Standbye mode, My Joost, Search, Help with Joost. All items besides linking to Joost.com directly move the user to that part of the application and enables users from having to click multiple times to jump to certain screens.

Tooltip preference overview

Joost does an excellent job placing informative tooltips throughout the entire application for all it’s components. The main issue I see with the tooltips is the length and placement of these tooltips, many times they are near sentence in length and cover other core components. The flash version supports all the functionality as Joost with the addition of a toggle button for enabling and disabling the tooltips. When users click this button all tooltips within the entire application are turned off, to turn the tooltips back on, users will simply need to click on the button again.

Ability to drag controller overview

Joost places most of the functionality of the application within the controller which is placed in the lower-middle of the window. The flash version supports this functionality plus enables users to be able to drag the controller anywhere on the screen.

Dock all components overview

Joost detects whether the user is actively moving the mouse and if not after 5 seconds makes all components disappear. The flash version supports the same functionality with the addition of a component which allows the user to override this setting and dock all components. This seems like an obvious feature considering the widget framework uses this functionality.

Intro overview

Both Joost and the flash version run the intro screen once the application is launched. Joost should allow users to disable the viewing of this screen through a settings interface.