During live events like Build, TechEd or GoingNative, Channel 9 does a "homepage takeover" and provides a complete live conference experience. A person can virtually attend the event and never leave the homepage.
There's a lot going on under the hood with this page and we're going to dig into what's happening behind the scenes.
There are four areas worth calling out:
The streaming player and all its fallback logic
The live question and answer experience
The featured program guide
The responsive nature of the page
Streaming Player
People expect events to be streamed. And they expect a high quality experience across devices. At Channel 9, our goal is to provide a great streaming experience on as many devices as we can.
The source of the stream is managed by the rock stars over in the Channel 9 studios: Larry Larsen and Golnaz Alibeigi. They are responsible for the live edits, camera switching, audio and everything else that's happening on the floor. They use a TriCaster for managing the live production. The feed from the TriCaster then (through a network connection and/or satellite up link) flows to a media delivery provider such as iStreamPlanet. The provider can then encode the video feed into the digital content, push it out to a CDN, and the end result is the stream URLs used by the different Channel 9 players. Sometimes, for smaller events, we do the encoding and push to the CDN directly from our location, but the end result is the same: URLs that we can put into our video players.
Depending on the device you are on, you will get a different player, including Silverlight (adaptive stream), Flash and HTML5. This allows us to support a wide range of different devices and browsers including all flavors of Windows and Windows Phone as well as iOS devices and Android devices. There is custom server logic that detects your device type and renders a different player connected to the appropriate feed. To make all this work, we need the video stream to be provided in multiple formats. This is done through some variety of IIS Media Services. The core format that is produced is a Smooth Streaming feed, using H.264 encoded video and AAC encoded audio. Using those formats allows us to use that exact feed in our Flash player (using the OSMF player and this special plug-in from the Smooth Streaming team), and is also a requirement for Media Services to transcode the stream into HLS as well. HLS is an adaptive streaming format supported by iOS devices and some flavors of Android. Finally we usually get a WMV stream that we can send to Windows Phone devices, and also acts as a 3rd level fallback on Windows machines. For all of these streams (Smooth, HLS, and WMV) there is always two completely independent streams for fail over if needed.
Question and Answer Moderation
A live question and answer experience is now a core part of any live event on Channel 9. People can watch the stream and, without going to another page, ask a question right there. Moreover, viewers can see all the approved questions that are queued up for the speaker to answer.
From an implementation perspective, this is all handled via AJAX calls. Questions are submitted via an AJAX POST. Signed in niners are recognized and their avatars are displayed. Anonymous users can also submit questions, optionally providing their Twitter handle. We resolve their Twitter avatar on the backend using this technique.
Incoming questions are pushed to an admin UI. Subject matter experts vet the questions and mark appropriate questions to go live. These live questions are pushed to Azure table storage. Approved questions are pulled via AJAX based on a poll.
Here's a look at the admin UI for the question moderator.
There is also a 'teleprompter' view (basically just big text on an otherwise empty page) that is loaded onto a monitor that is facing the people on camera so they can see the current queue of questions. We can also send them little messages ("keep going, next session is running late!") as needed.
Featured Program Guide
At the bottom section of the page is the featured program guide. This guide is constantly being updated throughout the event, again as part of the polling logic of the page. As soon as a new session begins, it gets updated with the time code of the stream, which allows people to bounce in the live stream right at the start of any session. As the day proceeds, the program guide gets fleshed out, with time codes and screenshots. And, as videos are made available for on demand viewing, the schedule is updated with links directly to the sessions.
Here's a look at the admin UI for the person who updates the featured program guide as the day proceeds:
Responsive Design
Lastly, it is worth calling out the responsive nature of the design. It was with Build 2012 that the page first added responsive design, employing flexible grids, media queries, and contemporary design practices to deliver cross-platform/browser/device experiences. The experience was designed and hand-coded by a teammate Nishant and the Paravel crew, Reagan, Trent, and Dave, the very same crew behind the new Microsoft.com home page redesign. Over time, we tweaked the page so that it works for any live event homepage takeover.
We'd love your feedback on our live homepage experience and any thoughts or questions you have on the live event homepage.