Now that you have seen how to host a video file at Silverlight
streaming account, I will show you an example of how to have a common web page
which will have hyperlinks to all video files hosted in your Silverlight
streaming account. This way, you can share all your video files using one
common web page. Let me assume you have hosted 5 video files using the
techniques that you have seen so far in this article.
Your main html / asp / aspx page should look as follows.
Listing 4
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>My Videos</title>
<script type="text/javascript" src="http://agappdom.net/g/silverlight.js"></script>
<script type="text/javascript" src="CreateSilverlight.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table width="95%" align="center" ID="Table1">
<tr>
<td width="20%"><a href="javascript:showVideo(1);">
<font face="verdana" size="2"><b>Birthday Party</b></font></a></td>
<td width="20%"><a href="javascript:showVideo(2);">
<font face="verdana" size="2"><b>Graduation Party</b></font></a></td>
<td width="20%"><a href="javascript:showVideo(3);">
<font face="verdana" size="2"><b>Bachelors Party</b></font></a></td>
<td width="20%"><a href="javascript:showVideo(4);">
<font face="verdana" size="2"><b>Wedding Day</b></font></a></td>
<td width="20%"><a href="javascript:showVideo(5);">
<font face="verdana" size="2"><b>Babyshower</b></font></a></td>
</tr>
</table>
<div id="videoWrapper" style="width:800px; height:700px;
overflow:hidden;"></div>
</form>
</body>
</html>
In the above code I have used a custom JavaScript function
named, "showVideo." You guessed it right; the function is defined
inside the "CreateSilverlight.js" file. The content of the Create
Silverlight file will look like Listing 5.
Listing 5
function showVideo (intCtr)
{
var varWrapper = document.getElementById("videoWrapper");
CreateSilverlight(intCtr);
}
function CreateSilverlight(intID)
{
if (intID == 1)
Sys.Silverlight.createHostedObjectEx(
{source: "streaming:/99999/Birthday",parentElement: videoWrapper});
if (intID == 2)
Sys.Silverlight.createHostedObjectEx(
{source: "streaming:/99999/Graduation",
parentElement: videoWrapper});
if (intID == 3)
Sys.Silverlight.createHostedObjectEx(
{source: "streaming:/99999/Bachelors",parentElement: videoWrapper});
if (intID == 4)
Sys.Silverlight.createHostedObjectEx(
{source: "streaming:/99999/Wedding",parentElement: videoWrapper});
if (intID == 5)
Sys.Silverlight.createHostedObjectEx(
{source: "streaming:/99999/BabyShower",
parentElement: videoWrapper});
}What I have done above is a very simple tweak from the code
that we got after we uploaded the zip file. I created an argument for the
method, CreteSilverlight called intID. The value of intID is passed by the
showVideo function. Again, the argument for the showVideo function is being
passed by the webpage which shows the video names with hyperlinks. So, if you
want to add a new video, all you have to do is add another row in the web page
with a different argument to the ShowVideo function. Also, you will have to
add another if statement inside the CreateSilverlight function which actually
initiates the video streaming.
