I've been playing around with the ASP .net Futures lately. They are a collection of (as the name implies) up and coming ASP .net technologies that installs ontop of your .net Framework 2.0 install. It's a really interesting package that builds ontop of the ASP .net AJAX framework featuring a wide collection of controls.
One of the coolest things included with it is the Media control. The Media control is used for leveraging the awesome media playing capabilities of Silverlight in a way which the developer does not have to focus on specific implementations and can focus simply on the end result (a video being played for instance).
The media control is automatically added to the toolbox when creating an ASP .net Future's project, if not, add the appropriate references, and manually browse for it.
The Media control on the toolbox, and on an instance of it in the web page designer.
Next, one plugs in the location of the media file they wish to play. An example of a Media control that plays an MP3 would be:
<asp:Media ID="Media1" runat="server" Height="240px" MediaSkin="Professional" MediaUrl="~/U2 - Miracle Drug.mp3"
Width="320px">
</asp:Media>
When you run the web application it will look like this and be playing the selected media file:
Additionally, the Media control exposes a rich variety of properties (which it translates into the proper JavaScript/XAML rendering to the client) to enable the developer to pretty much set any setting imaginable programmatically without having to worry about how it's actually being implemented. One of the neatest things it exposes is the ability to have chapters within the media being played. Primarily a chapter is a time index of a media file. It allows you to have points to which the user can jump around with. For instance the following instance of the control:
<asp:Media ID="Media1" runat="server" Height="240px" MediaSkin="Professional" MediaUrl="~/U2 - Miracle Drug.mp3"
Width="320px">
<Chapters>
<asp:MediaChapter ImageUrl="~/20.jpg" TimeIndex="20" Title="Twenty" />
<asp:MediaChapter ImageUrl="~/30.jpg" TimeIndex="30" Title="Thirty" />
</Chapters>
</asp:Media>
Will allow the user to jump to different sections as shown below:
So if we want to do something cool with this, we can have a client event execute when a new chapter occurs like below by setting the OnClientChapterStarted property, we specify a JavaScript function to execute when a new chapter starts:
<script>
function ChapterStarted(sender, args)
{
alert("A new chapter!");
}
</script>
<asp:Media ID="Media1" runat="server" Height="240px" MediaSkin="Professional" MediaUrl="~/U2 - Miracle Drug.mp3"
Width="320px" OnClientChapterStarted="ChapterStarted">
<Chapters>
<asp:MediaChapter ImageUrl="~/20.jpg" TimeIndex="20" Title="Twenty" />
<asp:MediaChapter ImageUrl="~/30.jpg" TimeIndex="30" Title="Thirty" />
</Chapters>
</asp:Media>
While runing it will look like so:
So the Media control wraps much of the streaming media functionality of Sliverlight into a convenient package that makes programming against extremely easy without making the developer have to worry about the low level intricacies of it.