It is of course inertia, that overwhelming sense of “what is the most important thing to do first?” that will kill you, and this project got hit bad because it came just when Passover interrupted my normal schedule, along with the usual slew of unusual events, such as preparing for TechEd (ah, I’ve another month, what, me worry?)
So, believing strongly that the first thing to do is something I’m going to take my own advice and start building; not where the most important lessons are, but where the low hanging fruit is: by creating a hyperVideo application in Silverlight 3 that will accomplish the following:
- Get something going
- Force the issue of where this project lives and how I track the code
- Give me something concrete to improve
- Start us right off with media
- Force the issue of how does a user even follow this project without Silverlight 3 installed (I think I have a good answer for that)
How Do You Follow This Tutorial If You Don’t Have Silverlight 3?
Let me be clear, Microsoft’s position is that Silverlight 3 is a developer only product, currently in Beta with no announced release date. Thus, we will continue to support and to provide lots of learning material for Silverlight 2. That said, this site in general and my blog in particular seems to attract an hourglass shaped demographic
Thus, I feel fairly safe assuming that a large proportion of readers of this blog have (or will soon have) set up a computer with a Silverlight 3 development environment. That said, I will try to put in images as well as live streaming examples so that you can follow this project even if you do not yet have a computer or virtual machine with Silverlight 3 installed.
Nothing gets me started like starting. I opened a new project and chose Silverlight Navigation Application from the Templates section and C# from the Project types
While I believe in being bi-lingual C# and VB, I usually start in C# if given the opportunity. I will provide VB code for this entire project, however, either translations of tricky parts, or complete working code periodically.
This opened a very pretty navigation page which I proceeded to make ugly by opening Blend 3 and modifying in a few ways (changing the BrandingTextNormalStyle, BrandingTextHighlightStyle adnd the PageLink style as well as the border margins and sizes, to suit my personal aesthetics
The key to getting started with the ViKi project, however, lies with a different set of videos; the 3 part series that begins here and which we will adapt as the starting point for the ViKi.
The First Thing We Need Is A Video
It would be helpful if we were all looking at the same video, and it would be even more helpful if that video was
- short so that we don’t have to shlep around inside a huge file and
- about a topic that we won’t confuse with the ViKi project itself
I am going to download Element to Element Binding because it is just under 6 minutes and has nothing to do with Hypervideo. Since I want to have a marker every 20 seconds, (a somewhat arbitrary decision) this video will end up with about 18 markers. I chose every 20 seconds as I see that as being about the right compromise between having as many opportunities for markers as possible without exceeding human reaction time.
To create this for yourself, download the video, place it into encoder, put a marker at 20 seconds and every 20 seconds after (naming each marker sequentially (marker-01, marker-02, etc.) and then instruct Encoder to give you a Silverlight Standard player as discussed in the Hypervideo videos!
The image has been cropped, but you can see that we’ve placed a marker every 20 seconds and named them sequentially from Marker1 to Marker 21.
Emitting The Player
With the video and markers in place, it is time to ask Encoder to emit a player for us (far easier than creating one by hand!). To do so, click on the OutputTab (not shown in illustration above), choose the Silverlight 2 Default template and modify the output name to add the word Encoded as shown below,
Click on the encode button at the bottom of Encoder, and just a few moments later you not only have an encoded video, but much more impressively you have a player ready to display your new hypervideo.
(All of this is reviewed in great detail in the 3 videos and the series of blog entries on Hypervideo that begin here – we’re really just catching up here as a starting point on the ViKi project).
As you may remember, the next step is to click on the white dot next to the template name and ask to edit the project in Blend, where you will name your new template, build the project and then edit the a copy of the player template (please see the referenced blog entries for step by step directions)
After you save the template in Blend, return to encoder, encode the video and return to your new project. Copy the styles from the app.xaml from the encoded project into the app.xaml for your new project (combining them).
Then copy MediaPlayer.dll and ExpressionPlayer.dll from the Encoder-emitted player project into the bin/debug directory of your new project. Add a reference to each in your project and then add a namespace to the top of your HomePage.xaml,
The Home Page
We’ll place the player inside the Home page much as we placed in inside page.xaml in the previous examples,
<Grid x:Name="LayoutRoot" Background="White">
<RowDefinition Height="9*" />
<RowDefinition Height="0.5*" />
Falling off the Rails
It was about here that I fell off the rails. I thought I’d grab the code that I’d written and demonstrated a dozen times and just plunk it down into the home page. “not so fast” the gods yelled. I then spent 14 hours looking at (a) how ExpressionPlayer had changed and why it worked perfectly when its parameters were passed from an html file but not at all when they were passed from my code.
I spent a good part of the next day getting it to work, and along the way learning a good bit about how the code emitted by encoder has changed (for the better) and why, and what it means to working with that code. I also learned a good bit about working with URIs, media and all sorts of digressions that will come in handy. I will write that story tomorrow.
The following 2 severely cropped images will give a sense of the working code as it stands today,
The about page with an accordion from the Toolkit serving to provide information about the project.
All the code and a detailed walkthrough to follow.
Previous: VideoWikiDesign Step 1 Next State of the project