| Comments

in my previous sample i talked about creating custom expression encoder templates.  good times.  also jesse alluded to a something him and i have been working on with regard to what he calls "hyper video" and what i've previously referred to as 'timed overlays' in an example.

in going through both of these i found an issue that i forgot to write about (but a helpful commenter reminded me: thanks ernie!) with regard to using the expression encoder templates and asp.net ajax.

the problem

expression encoder uses a model of encapsulating silverlight and the media elements within an asp.net ajax control.  because they do that, they include the Microsoft AJAX client library (MicrosoftAjax.js) in the template output.  this poses a problem when you implement their code within an asp.net page that already has asp.net ajax in it! 

if you don't make any changes and have a ScriptManager in your code in addition to the template output, you'll see errors like Sys._application, yada yada.

the solution

the solution is two part.

first, you'll notice that in your expression encoder output you'll see the script reference to MicrosoftAjax.js.  if you are including a ScriptManager on your page for other ajax-ness, then you can remove this.  why? well because ScriptManager brings down the MicrosoftAjax.js file for you automatically (read: trust me, you don't need it).

second, you have to move your other javascript references from expression encoder to within the ScriptManager.  it will look something like this when completed:

<asp:ScriptManager id="sm" runat="server"> 
<Scripts>
<asp:ScriptReference Path="~/Silverlight.js" />
<asp:ScriptReference Path="~/BasePlayer.js" />
<asp:ScriptReference Path="~/PlayerStrings.js" />
<asp:ScriptReference Path="~/player.js" />
<asp:ScriptReference Path="~/StartPlayer.js" />
</Scripts>
</asp:ScriptManager>

this is only necessary if you have expression encoder template output as well as you are implementing asp.net ajax content on your page/application.

hope this helps.

| Comments

i've been asked recently why i use the template code in my samples for media playback in .  simple: free code :-).  the templates in expression encoder provide very interesting stub code handling the simple and advanced media playback capabilities already for you.  if all you need is a simple mediaelement in your silverlight application, then sure, it's a bit heavy.  but if you are developing a media playback integration with end-user controls, you may want to consider it.  it provides all the simple play/pause/etc functionality, but also the glitz of volume slider handlers, time thumb handlers, fullscreen view, etc.  very slick.

anyhow, maybe you decide to go this route and create your killer player with your own xaml (you can see a screencast of this here).  you decide you are sick with cut/paste every time and using the stub and having to replace.  no problem, create your experience as a custom template!  here's how.

first, take a look at the template files in the expression encoder template folder (<installdir>\Microsoft Expression\Encoder 1.0\Templates\en).  you'll see all sorts of replacement code in there.  if you like all of the functionality, then don't change a thing (except your xaml).  if you have special code in your implementation then spend some more time looking at the replacement values and see what you have to modify.  for our purposes here, let's assume we are only modifying the xaml UI. 

create a new folder in the Templates\en (or your language) directory.  it doesn't matter what you name it here...this is not what shows up in the output options.  i've named mine 'TimHeuerSimple' just to be clean and, well simple.

then what i do (remember in this sample here we are only replacing the xaml ui) is copy the contents of a previous template (i use corporate silver) and put it in my new folder.  done.  now you have (or should) make three changes:

    1. edit the player.xaml file in the new folder to be your desired xaml.  should be a simple open, select all, paste, save operation for most.
    2. create a new preview image so the user can get a glimpse of the preview.  it doesn't have to be named preview.jpg, but as long as it is, you'll save yourself one more change :-).  the other preview images are 649x487 so i just stuck with those sizes as well.
    3. open the Default.html file.  look at line 2.  here is where you'll change to the template name you want the user to see.  your templates are always added to the bottom of the other template listings, so no need to get trickery here with the name.  NOTE: if you created your preview image as something other than 'preview.jpg' line 3 in this file is also where you will change the pointer to that preview.

boom, you are done.  now next time you start expression encoder, you'll see your template as an output option:

there you have it...now when you want to encode your media and have the output into your custom player (or perhaps a corporate/departmental standard look and functionality) you have it.

hope this helps!

| Comments

wow, what a day, i'm sure you're reading all about it but here's some recap:

and holy cow here's the news for developers:

microsoft officially partners with novell to deliver moonlight as the silverlight implementation for linux.  booyah.  you can read all the details about it here.  great job to the microsoft team on the legal mumbo jumbo, and great job to miguel and team for getting this through.  the plan is that novell will release moonlight no later than 6 months from silverlight 1.0 release (today)...with the aggressiveness of the mono team i'd imagine sooner.

so just suse linux right?  apparently not!  as long as the distro supports running mono, moonlight should run in that environment as well.  what about codecs?  the codecs required to support silverlight content (media) will be from Microsoft.  the installer for moonlight that novell provides will/should make including these codecs a seamless process.  in case you don't get this...that's a big deal.

that sound?  yeah, my jaw dropping.  me likey.  oh, and wicked cool halo3 hd video

| 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.

| Comments

just yesterday tim sneath posted a video on creating video with overlays.  as i saw that come in my reader, i was just finishing testing my code for a screencast i was recording on creating video with timed overlays.  i figured, what the heck, you can never have enough tutorials, and mine was demonstrating a different method for accomplishing the same thing.

the scenario i was thinking of came to mind when i was lazy and watching television.  i saw a commercial where the person in the commercial said "if you call the number that is at the bottom of your screen" and then the number popped up.  i thought this concept would make a good tutorial on using markers in media files.  for advertisers, this would allow media to be re-used, but leverage different messaging in the form of language, promotional offers maybe,  especially in the web space, you'd probably want to provide specific marketing depending on the placement of the media advertisement.  or at least that was my thinking...

Creating Video with Timed Overlaysanyhow, so i put the screencast up and added it to my TimCast feed.  it demonstrates first using (preview) to import a quicktime movie file recorded with my isight camera and placing media markers within the media, then encoding the file to a consumable format by .  the next step is leveraging expression blend 2 (preview) to render the media and add event handling looking for the media markers and responding to them with different animations and functions.

it's about 19 minutes, and might be some good peripheral learning.  i'm hoping to do more of these, so any suggestions of topics is appreciated...feel free to leave a comment about a suggested topic.

you can also view the video on channel9 if you don't like subscribing to podcast feeds.