| Comments

The Expression Encoder team has announced the plans for SP1 of their product (announced, not released).  You can read all the details on their team blog for more information, but two things caught my attention that are probably of most interest: H.264 encoding and a Silverlight 2 template in the box.

The H.264/AAC encoding support is a result of customer feedback (as well as preparing for future Silverlight support).  While the profiles in this service pack will be limited and may not meet the needs of everyone immediately, it is a great step and will probably meet the needs of most.

The templates produced by Encoder 2 right now have been Silverlight 1.0 templates.  This has been a sore spot for some wanting to move to Silverlight 2 and remove themselves from all the javascript that the templates have.  There have been a lot of solutions popping up (shameless plug: SL2VideoPlayer on Codeplex), but people still want the template in the box (note: you can do this with your SL2 players today as well).  The team announced they will be providing SL2 templates based on a core control called MediaPlayer which supports a wide range of features.  As you could imagine the template will support basic and advanced playback capabilities and will be able to be styled as well as advanced property manipulation in Expression Blend.  This one feature caught my eye and makes me happy:

Byte-range seeking: When a user clicks forward on the timeline into a non-downloaded region, the player will cancel the current progressive download and start a new one from the point that has been seeked to.

Sweet.  I can’t wait.  The SP1 will happen by the end of the year and will be a free upgrade to existing Encoder 2 customers.

| Comments

So you want H.264 support in Silverlight?  So do we.  In fact we will be showing a preview of H.264 and AAC support in Silverlight at the International Broadcasting Conference (IBC) this week in Amsterdam.  Scott Guthrie comments on this saying:

At IBC 2008 we will be demonstrating a technology preview of H.264 video and Advanced Audio Coding (AAC) audio playback support in Silverlight, and H.264 authoring using Microsoft Expression Encoder and Windows Server 2008 for delivery. Until now, Silverlight has supported the SMPTE VC-1 and Windows Media formats, as well as MP3 for audio, enabling customers to take advantage of broad support across the Windows Media ecosystem, including third-party tools, service providers and content delivery networks.

We’ve always wanted Silverlight to support a variety of formats, so today we’re announcing that H.264 and AAC support will be available in a future version of Silverlight, which will offer content owners greater flexibility and choice to deliver video and audio.”

One thing that I didn’t know was that Microsoft has been an active member in the standardization of H.264.  Microsoft’s Gary Sullivan was the chairman of the Joint Video Team (JVT) which developed the H.264 standard.

This is exciting news for the future of Silverlight.  I hope that this is good news to the implementers of media and Silverlight.  You can find out more information about the IBC here and a full Q&A with ScottGu here which also gives some great information about the results of viewing at NBCOlympics.com and where other uses of Windows Media Server were implemented (CCTV for example).

UPDATE: To clarify, this support will be in a future version of Silverlight.


This work is licensed under a Creative Commons Attribution By license.

| Comments

I’ve just finished updating my modification of Joel’s original concept.  Joel had a really great base for me to build off of and used styling and templates to create simple controls for a standard Silverlight media player that could be embedded.  I took his sample and made some minor adjustments to accommodate automatic sizing as well as make it a bit more parameter-driven.  The end result was (what I think at least) a fairly nice player that could be flexible if needed:

Joel made great use of styling primitive controls to be able to leverage core functionality rather than building it all himself.  One of those controls used was the ToggleButton (the play/pause feature) which makes sense for the implementation.  In the beta 1 version of styling we were able to use different styles for MouseOver states for checked/unchecked features.  A snippet of the styling XAML looked like this:

<Storyboard x:Key="MouseOver Unchecked State">
    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="playSymbol" 
Storyboard.TargetProperty="Opacity" To="1" /> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="pauseSymbol"
Storyboard.TargetProperty="Opacity" To="0" /> </Storyboard>

This worked fine in beta 1.  Beta 2 introduces the VisualStateManager model which is an exciting new feature for developers and designers.  Opening the video player project in the latest tools had some things blow up for us…no problem, let’s make use of VSM to change the styling implementation.

One problem…the ToggleButton no longer supports MouseOver states specifically for Checked/Unchecked as we’ve implemented in the video player.  My first thought (and a few emails to the team) was to inherit from the ToggleButton and do my own implementation, adding those states into the control.  I was able to do this by creating a new class file in my Silverlight project, then inheriting from ToggleButton and a few overrides.  I first wanted to support VSM so I added the appropriate TemplateParts to my class:

[TemplateVisualState(Name = "CheckedMouseOver", GroupName = "CheckStates"), 
TemplateVisualState(Name = "CheckedMouseOut", GroupName = "CheckStates"), TemplateVisualState(Name = "UncheckedMouseOver", GroupName = "CheckStates"),
TemplateVisualState(Name = "UncheckedMouseOut", GroupName = "CheckStates")] public class ToggleButtonEnhanced : ToggleButton {

This worked fine and they showed up in Blend designers as well for me to implement.  I then chose to override the MouseEnter/Leave events and did something quick like this:

protected override void OnMouseEnter(MouseEventArgs e)
{
    base.OnMouseEnter(e);
    if (base.IsEnabled)
    {
        if ((bool)base.IsChecked)
        {
            VisualStateManager.GoToState(this, "CheckedMouseOver", true);
        }
        else if ((bool)!base.IsChecked)
        {
            VisualStateManager.GoToState(this, "UncheckedMouseOver", true);
        }
    }
}

Fair enough right?  Well it appeared to be working.  The problem was that ToggleButton maintained a Normal state that was conflicting with certain scenarios I had in my implementation.  You see the base.OnMouseEnter() was essentially the rathole here.  Some spelunking showed that when a state changed it actualy went from the desired state, then back to ‘Normal’ – for example the Pressed action wend: MouseOver,Pressed,Normal.  The final transition was causing my problem.

Now I was looking at overriding the OnApplyTemplate method and thus virtually having to re-implement all the other state transitions as well.  Now I’m no longer really getting a huge benefit out of my inheritance.  So I went back to some experts for some advice.  Dave gave me some pointers and we chatted about the implementation and desired outcomes.  Dave’s much smarter than me on VSM, well, because he had to implement it :-).  For my particular scenario he pointed out that I really had only one property that was changing in the MouseEnter/Leave events: Opacity.  So why not just change Opacity for the Grid container rather than worry about the elements.  Duh.

So now I no longer needed my custom ToggleButton, but could use the primitive ToggleButton to do my dirty work.  I implemented the MouseOver, Checked, and Unchecked states is all I really needed to manage my transitions.  A few learnings about some things I was doing wrong and boom, the new player works as expected.

I learned a few things in this quick journey through VSMville, and one was that it was pretty easy to implement a custom control to support the VisualStateManager model as well.  I think I’ll be digging into this one deeper soon.

Hope this helps someone!  Here’s the code for the updated Video Player.  While the ToggleButtonEnhanced is not used in the final implementation, I kept it in the code file so you could see what path I started along.

| Comments

While you may not personally work with a lot of media solutions in your Silverlight application, it is nice to know the quality is there when you need it.  Silverlight supports the VC-1 codec for media which provides a standards implementation for high quality media.  I would imagine that most developers probably don’t know/care what all that means.  But if you are deploying a high-touch media solution (i.e., online TV, etc.) you want that high quality.

Our resident media expert, Ben Waggoner, just put up a great (and detailed) post about some ‘high-touch encoding’ techniques he uses and does some comparisons to some media outputs with FLV files as well.  There are some gory details for tweaks in the media outputs, much of which I won’t pretend to understand as an expert, but as a geek they seem to make sense :-).

One of the most compelling comparisons Ben notes is the quality from the VP6 (what FLV uses) and the VC-1 codec in a particular image…notice the shirt texture difference.  The VC-1 output in this sample is much more close to the original source.

FLV:

VC-1:

Ben admits in some areas he’s not sure why there is such a difference (i.e., the FLV is darker it appears as well).  It is an interesting article to read and he provides all the details, sample files and implementation for you to examine.  A lot of the things he shows for the tweak settings are a part of Encoder 2 which is to release soon.

| Comments

i just put up another podcast video of how to "cheat" at creating a media player for silverlight.  have you been looking at some of these media experiences with all their fancy buttons and dvd player-type overlays, etc. but didn't want to take the time to code your own?  well, you don't have to :-) (man that sounds like an infomercial)

in this podcast i demonstrate using expression media encoder as a tool that will essentially generate stub code for you.  now keep in mind that expression media encoder itself generates some pretty kick arse templates that may perfectly suit you.  but perhaps you want a player that has more branding or a mix of certain elements, etc.  well, still use expression media encoder for this.  let it output the template and then just change the xaml! 

after you watch the podcast (subscribe links on the left panel of my web site if you are reading this in a reader), you'll hear me reference certain named elements for key function points of the player code that is generated.  i said i'd call them out here and that is what i'm doing :-).  these refer to the named elements in the xaml.  they could be canvas elements/groups or objects themselves like a rectangle.  as long as they are named specifically the code should work.  here's a list of the most popular that i've used and the heirarchy of any children objects they should have.  the names themselves are in bold, everything else is just description:

    • VideoWindow - this is the key element to display the media and must be a MediaElement node.  you can add clipping masks, etc. (as i show in the video), but you must have at least one MediaElement with this name
    • PlayPauseButton - the grouped canvas of your play and pause buttons. named this way, the logic is already there to handle certain functions if you don't provide additional animations/timelines (like hide/show).
      • PlaySymbol - the symbol for the actual play button
      • PauseSymbol - the symbol for the actual pause button
      • PlayPauseButton_MouseEnter/MouseLeave/MouseDown - i'm only going to put this here once, but it applies to most of the other elements like StopButton and MuteButton, etc.  if you have a timeline named these, it will fire, if you don't some default actions will occur.
    • StopButton - the symbol for the actual stop button
    • Timeline - for displaying the playing progress of the media
      • TimeSliderDecoration - the element that shows the full progress
      • TimeSlider - the progress growing metere
      • TimeThumb - the arrow/object, etc. that shows the point in the progress and the user would drag to adjust the position
    • VolumeSlider - the elements making up the volume function
    • VolumeThumb - the arrow/object that shows the position of the current volume and the user would drag to adjust
    • VolumeUpButton/VolumeDownButton - if you were to use buttons for volume instead of a slider
    • MuteButton - self explanatory
    • CurrentTimeText - displays the time progress of the media element
    • ChapterArea - the area that would display the markers in the media file (dvd-style playback)
    • FullScreenArea - the full screen experience root node

there are, of course, more elements to mess with and i'd encourage you to look at one of the more advanced template outputs and start sniffing around to see what you find.  the cool thing is that you don't have to have all of them.  you'll notice in the podcast that i only put 3 elements on there and there are no errors.  the output code handles if an element is there or not for you.

i hope this helps get you started on creating great media experiences with silverlight and expression sooner!  if you want the sample player xaml that i used in the podcast, you can download that here.