Below the full Silverlight player code for a video hosted on winstreamer.doit.wisc.edu, using one of our hosted players. Check our Silverlight Player gallery page to pick a player style that works best for your content. The code below only needs to be modified in one place ot swap player styles.
The example code below inserts a Silverlight video player into a web page which is configured to stream Windows Media WMV files from winstreamer.doit.wisc.edu. This is a very elegant solution to update legacy WMV content to play cross platform, without having to re-encode your files. For use in courses hosted on Learn@UW, you will have to upload completed web pages and link to them. This code cannot be copy/pasted into the "insert stuff" button in the Learn@UW editor.
To implement the code below on your site, click the Copy to Clipboard button and then paste the code into your preferred html editor and save to your local server. To see the code in action, open the Silverlight WMV Streaming Player Example page. Note that Silverlight uses the http protocol to stream from Windows Media server. Do not use mms:// in the MediaSource tag. For faster performance in Silverlight, we recommend to encode for Smooth Streaming and host content on our Smooth Streaming server instead. The ability to stream WMV files from Windows Media server is a legacy capability only.
The highlighted code areas below show the sections that may to be changed in the script to adapt it to your account and files. This codes uses the "Expression" player template hosted on our server.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
.fadeSome {
opacity:0.30;
filter:alpha(opacity=30);
-moz-opacity: 30%;
}
.fadeLots {
opacity:0.50;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
}
.fadeCompletely {
opacity:0.0;
filter:alpha(opacity=0);
-moz-opacity: 0.0;
}
#silverlightControlHost {
height: 100%;
padding-top: 10px;
padding-left: 10px; }
</style>
' <script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";
errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
function highlightDownloadArea(fOn) {
document.getElementById("overlay").className = (fOn) ? "fadeSome" : "fadeLots";
}
function CloseWindow()
{
window.close();
}
</script>
</head>
<body>
<!-- Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or hidden when debugging is completed -->
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight"
width="852" height="480"
>
<param name="source" value="http://smoothstreamer.doit.wisc.edu/players/Expression/MediaPlayerTemplate.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="autoUpgrade" value="true" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="enableHtmlAccess" value="true" />
<param name="enableGPUAcceleration" value="true" />
<param name="initparams" value='playerSettings =
<Playlist>
<AutoLoad>false</AutoLoad>
<AutoPlay>false</AutoPlay>
<AutoRepeat>false</AutoRepeat>
<DisplayTimeCode>false</DisplayTimeCode>
<EnableOffline>false</EnableOffline>
<EnablePopOut>true</EnablePopOut>
<EnableCaptions>true</EnableCaptions>
<EnableCachedComposition>true</EnableCachedComposition>
<StretchNonSquarePixels>StretchToFill</StretchNonSquarePixels>
<StartMuted>false</StartMuted>
<StaysFullScreenWhenUnfocused>true</StaysFullScreenWhenUnfocused>
<StartWithPlaylistShowing>false</StartWithPlaylistShowing>
<Items>
<PlaylistItem>
<AudioCodec>WmaProfessional</AudioCodec>
<Description></Description>
<FileSize>135289405</FileSize>
<IsLive>false</IsLive>
<IsAdaptiveStreaming>false</IsAdaptiveStreaming>
<MediaSource>http://winstreamer.doit.wisc.edu/doit-nms/ED_1600.wmv</MediaSource>
<ThumbSource>ED_1080P_25mbps_VBR_master_Thumb.jpg</ThumbSource>
<Title>Elephant%26apos%3Bs%20Dream</Title>
<DRM>false</DRM>
<VideoCodec>VC1</VideoCodec>
<FrameRate>23.999808001536</FrameRate>
<Width>852</Width>
<Height>480</Height>
<AspectRatioWidth>16</AspectRatioWidth>
<AspectRatioHeight>9</AspectRatioHeight>
</PlaylistItem>
</Items>
</Playlist>'/>
<!-- unused valid silverlight init parameters
<param name="enableFrameRateCounter" value="bool" />
<param name="enableRedrawRegions" value="bool" />
<param name="maxFrameRate" value="int" />
<param name="allowHtmlPopupWindow" value="bool"/>
<param name="background" value="colorValue"/>
<param name="splashScreenSource" value="uri"/>
<param name="fullScreen" value="bool"/>
<param name="onFullScreenChanged" value="functionname"/>
<param name="onResize" value="functionname"/>
<param name="onSourceDownloadComplete" value="functionname"/>
<param name="onSourceDownloadProgressChanged" value="functionname"/>
<param name="windowLess" value="bool"/>
-->
<div onmouseover="highlightDownloadArea(true)" onmouseout="highlightDownloadArea(false)">
<img src="ED_1080P_25mbps_VBR_master_Thumb.jpg" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>
<img src="Preview.png" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>
<div id="overlay" class="fadeLots" style="position:absolute;width:100%;height:100%;border-style:none;background-color:white;"/>
<table width="100%" height="100%" style="position:absolute;">
<tr><td align="center" valign="middle"><img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"/></td></tr>
</table>
<a href="http://go2.microsoft.com/fwlink/?LinkID=149156">
<img src="" class="fadeCompletely" style="position:absolute;width:100%;height:100%;border-style:none;" alt="Get Microsoft Silverlight"/>
</a>
</div>
</object>
<iframe id='_sl_historyFrame' style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>