What you'll need Expressions Encoder: http://www.microsoft.com/expression/products/Overview.aspx?key=encoder Silverlight Hosting: http://silverlight.live.com/Default.aspx Click Here to see an example. Create a Silverlight Application 1. Download and install Microsoft Expressions Encoder. 2. At the bottom of the encoder screen click import and select a video, supported formats include WMV, AVI, and MPEG. Import as many videos as you need. 3. From the Output tab on the right side, under Thumbnail select which type of thumbnail you would like to to display. 4. Under Job Output, from the template list select a template, use Reflection if you want a playlist. There are few other templates that support a playlist, but for this example we are using Reflection. 5. Select Export Package the Application 1. Download the manifst.xml click here (right click and save target). 2. Place the manifest.xml in the folder where you exported the silverlight application. 3. Select all the files in the export folder except for the HTML file and zip them. Silverlight Hosting 1. Create a silverlight hosting account here. 2. Once you have an account to go Manage Applications and upload your zip file. Placing the video on your page 1. Use the IFrame code that silverlight hosting provides you with one you have uploaded your video. For using the HTML follow step 2, if you want to use the Custom Footer module skip to step 3. 2. Paste the IFrame code into the HTML module, resize if necessary. 3. Use the following base code, paste your IFrame code where indicated, should look like the finished example. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
Paste your code here (remove this line!)
</xsl:template>
</xsl:stylesheet> Finished Example <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<iframe src="http://silverlight.services.live.com/invoke/000000/Slideshow%20playlist%20example/iframe.html" scrolling="no" frameborder="0" style="width:585px; height:439px"></iframe>
</xsl:template>
</xsl:stylesheet> 4. Paste the code in the Custom Footer Module (note you need remove the default code that is already there). The Custom Footer module is located under Modules in the Page Editor (same place as the HTML module). If you do not see it you need to enable Advanced Design Features found in the Page Manager under Site Actions. |