Tuesday, November 10, 2009

Channel 9 Full Screen Video Player: My first Bookmarklet

I really enjoy watching videos from Channel 9, Microsoft’s community site that targets users and developers. It is a great way to keep updated on the latest technologies and learn more about future products before they come out. The only thing that I don’t like is that the website is not very user friendly for people that have multiple monitors. This surprises me, as most developers that I know use at least two monitors, sometimes three or four. Even after their recent layout change, which increased the size of the video player significantly, the embedded video player is still too small to be able to read code from screencasts. There is of course a full screen button, but this doesn’t really work when multitasking on multiple monitors as it will close as soon as you click on another browser or window on another screen. Both Silverlight and Flash have this issue, which they consider to be a security feature, but it renders the full screen mode worthless useless you stop using your second monitor while watching the video.

Currently there are only two workarounds to the Silverlight/Flash full screen issue, both of which YouTube has already implemented using buttons at the top of the video player. The first is enlarging the video so that it takes up more of the page, and the second is opening it in a new page that can be resized to as large or small as you want. Alternatively you can use a different video player such as the embedded Windows Media Player, but while the WMV links on Channel 9 display full screen in the browser they sometimes have buffering or quality issues and cannot take advantage of the Smooth Streaming that the Silverlight player can offer. All I really wanted was a way to enlarge the video to fit the full width of the browser window, so I figured why not just write a script to do it?

Bookmarklets are essentially small snippets of javascript code that live in a browser’s favorites and do simple things like opening a Wikipedia box for searching, Subscribe/Share/Note the current webpage in Google Reader, using Google SideWiki, or adding any item to an Amazon Wishlist. Due to cross-site scripting restrictions implemented in most browsers they are relatively safe, so they shouldn’t be able to drain your bank account or spam all your friends on Facebook. Plus unlike Greasemonkey scripts they will only run when you click on the link in your favorites, so they won’t slow down or change your normal browsing habits. This seems like a perfect fit for resizing the Silverlight video player on Channel 9.

So after dissecting the way that the Google bookmarklets worked I started coding my own. If you want to try it out you can simply drag this link to your favorites (or right click and select "Add to Favorites"): C9FullScreen and then click on the new link that it created after browsing to your favorite Channel 9 video. To see how it works, here is the code that gets embedded into the C9FullScreen link:

And here is the script that gets injected into the page to resize the video:

And here is the result: A full screen video... Enjoy!


markpittsnh said...

I am getting this error when using this c9 page (http://channel9.msdn.com/learn/courses/SharePoint2010Developer/SharePoint2010DeveloperRoadmap/SharePoint2010IntegrationwithPowerShell/)

(1) Added your link as a favorite
(2) Navigate to http://channel9.msdn.com/learn/courses/SharePoint2010Developer/SharePoint2010DeveloperRoadmap/SharePoint2010IntegrationwithPowerShell/
(3) Clicked on C9FullScreen favorite
(4) error below.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; MALC)
Timestamp: Thu, 20 May 2010 14:08:09 UTC

Message: 'mpID.1' is null or not an object
Line: 36
Char: 5
Code: 0
URI: http://www.theg2.net/bookmarklets/C9SLFullScreen.js

Greg Bray said...

Thanks for the bug report. It looks like that video uses a different URL than the standard Channel 9 videos, which caused the script to stop working. I uploaded a new version so it should start working again now.

Rick Bielawski said...

Hmm, Not only does http://www.theg2.net/bookmarklets/C9SLFullScreen.js no longer exist but if I paste the code above to a file in my local drive and change the bookmark to point to my local drive it still doesn't work. Perhaps the text above doesn't contain the 'fix' you applied to the linked code????

Post a Comment

Blog.TheG2.Net - Your guide to life in the Internet age.