Encoding Media using Expression Encoder and testing with ASP.NET MediaPlayer control

 

In this lab we will have a closer look on Encoding Media by using Microsoft Expression Encoder 2.0. So, lets see how to encode Media and use it with ASP.NET control MediaPlayer-

Introduction – :

Make sure you have installed following tools as shown bellow-

1) Microsoft Expression Encoder 2.0 with SP1.

2) Microsoft Visual Studio 2008 With SP1.

1) So, let’s start by opening Microsoft Expression Encoder 2.0 .

2) Drag and Drop any .wmv file on the surface of Expression Encoder 2.0 as you like.

I took the Bear.wmv file in this lab.

3) Now if you observe carefully, you will see a “Orange Slider” which will allow you to play the video as per the time frame you would like to choose as shown bellow-

4) This Slider will allow you to choose time frame from where you would like to put the Book Marks and start playing the video from the Book Mark you would like to-

5) To add Book Marks into the video, move the slider as per you convenient timer. Make a choice of Metadata Window from Windows Menu as shown bellow-

6) Once you get the Metadata window you will see the Markers section (Group) within Metadata window.

7) By clicking “Add” button, you can add the book marks. Once you add the Book Marks, now you can name the “Value” as Marker1 and check the Thumb Nails checkbox as well.When you click the Thumb Nails, it actually creates a .JPG file for you which you can use further a head to play the video as per you requirement.

8) So, now let’s create few markers for our Bear.wmv video by moving a slider. Once you finished with adding markers, Click the Button “Encode” as shown bellow-

9) Once it is Encoded, Go to Output Window by making a choice of Window Menu-> Output

10) Make a choice of Directory as shown above and copy the path. Open the path in Windows Explorer and observer the directory. You will find the Encoded Video and few Thumb nails which we have created during our encoding procedure in a folder.

Now our Encoding is done. So, Let’s Create A Silverlight Project Or Simple ASP.NET web site.

11) Once you have created the Web site, you will find the Default.aspx page. Drag and drop the ScriptManager control on Default.aspx page. This is a mandatory step for showing the output of our Encoded Video.

12) Create an empty folder into web site you have created. Name it as MediaOutput and Copy the Encoded output ( Encoded Media .wmv file and .jpg files) in a folder.

13) After that go to Silverlight group from the tool box and drag and drop MediaPlayer Control on the Default.aspx page. Go to design view of Default.aspx page and adjust the Height and Width of the Silverlight MediaPlayer control.

14) Click the pin and click a link called Import Skin. You will see an Import Skin window from where you can make a choice of beautiful skins for MediaPlayer as per you choice. These are the default skins which are given by Microsoft. But If you want to build your own skins you can do the same and apply it to MediaPlayer.

15) Make a choice of a skin which you like and give the Media source as shown bellow-

16) Now go back to Default.aspx HTML source and type the following-

<asp:MediaPlayer ID="MediaPlayer1" runat="server" AutoPlay="True" 
        Height="496px" MediaSkinSource="~/Expression.xaml" 
        MediaSource="~/MediaOutput/Bear.wmv" Width="671px">
        <Chapters>
            <asp:MediaChapter Position="2.0" ThumbnailSource="~/MediaOutput/Bear_2.002.jpg" Title="Marker1" />
            <asp:MediaChapter Position="5.0" ThumbnailSource="~/MediaOutput/Bear_4.997.jpg" Title="Marker2" />
            <asp:MediaChapter Position="8.0" ThumbnailSource="~/MediaOutput/Bear_8.004.jpg" Title="Marker3" />
            <asp:MediaChapter Position="11.0" ThumbnailSource="~/MediaOutput/Bear_11.024.jpg" Title="Marker4" />
        </Chapters>

</asp:MediaPlayer>

17) And you are Done !! Hit F5 to test the Encoded media and you should see the output as bellow-

Now as you have completed writing the fifth Silverlight Lab, let’s have a closer look on sixth lab – “Creating Deep Zoom Application for your Images.”