Silverlight - Maintaining Video Timeline Position Between Posts
This post shows how to persist the timeline position of a Silverlight video between postbacks.
(This information relates to Silverlight 2, ASP.NET and JavaScript)
Are you familiar with the Silverlight MediaPlayer? It allows you to easily play a video in a Web page. I was thinking it would be nice to have a client side (JavaScript) way to persist the video timeline. This way, when you leave a Web page in the middle of watching a Silverlight video, you can continue where you left off when you return. There may be a few different ways to accomplish this. The way I describe shows how to use a cookie to persist the video position.
Here are the basic steps to create a Web page that uses a Silverlight MediaPlayer control to persist the video position between postbacks using a cookie.
In order to follow the steps below, it will be helpful to have the following available:
· The .NET Framework version 3.5.
· The Silverlight 2 Toolkit.
· Visual Studio 2008.
· A media file (.wmv or .wma file).
Add the controls to your Web page
1. First, create a regular ASP.NET Web site.
2. Add an AJAX ScriptManager and Silverlight MediaPlayer controls to your Web page.
Note: When you add a MediaPlayer control to your page from the ToolBox, Visual Studio adds System.Web.Silverlight.dll into the Bin directory of your project.
3. Set the MediaSource property of the MediaPlayer control to point to a video file.
4. Set the AutoPlay property of the MediaPlayer control to False.
5. Add the following attributes to the MediaPlayer control so that it knows how to reach the client functions (that we add later):
OnClientMediaOpened="onMediaOpened"
OnClientCurrentStateChanged="onStateChanged"
Here’s how the HTML looks:
HTML
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Persistent Video Position</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:MediaPlayer
OnClientMediaOpened="onMediaOpened"
OnClientCurrentStateChanged="onStateChanged"
AutoPlay="false"
MediaSource="~/Media/video1.wmv"
ID="MediaPlayer1"
runat="server"
Height="240px"
Width="320px">
</asp:MediaPlayer>
<p></p>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
Add JavaScript to your Web page
1. Add the following JavaScript to your Web page. Place it in a <script></script> tag.
JavaScript
var myTimer;
function timerInterval() {
// Recursive timer call.
myTimer = setTimeout("timerInterval()", 5000);
onTimerReached();
}
function onMediaOpened(sender, args) {
locMark = getCookie('locMark');
if (locMark != null && locMark != "") {
// Set the video position to the cookie value.
sender.set_position(parseInt(locMark));
$get("Label1").innerHTML = locMark;
}
}
function onTimerReached() {
// Each time the timer is called,
// get the video position.
var pos = Math.round($find("MediaPlayer1").get_position());
if (pos != 0) {
setCookie('locMark', pos, 365);
$get("Label1").innerHTML = pos;
}
}
function onStateChanged(sender, args) {
// Only allow the timer to execute
// when the video is playing.
var state = sender.get_currentState();
if (state === "Playing") {
timerInterval();
}
else {
clearTimeout(myTimer);
}
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
function setCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) +
((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}
How It Works
When the MediaPlayer plays the video, the MediaPlayer will start by doing the following:
· Call the onMediaOpened client function.
o Check if there is a cookie containing the last known video position.
§ If there is a cookie, it will set the position of the video and set the text of Label1 to the cookie value.
· Call the onStateChanged client function.
o Which will only allow the timer to execute when the video is playing.
o And, will call the timerInterval function.
§ The timerInterval function will call itself recursively (set to every 5 seconds).
§ Also, the timerInterval function will call the onTimerReached function.
· The onTimerReached function will get the video position, and conditionally will set the marker cookie and set the text of the label showing the position marker.
For more information about the Silverlight MediaPlayer control, including code, videos, and walkthroughs, see ASP.NET MediaPlayer Server Control.
-- Erik Reitan
ASP.NET User Education
This posting is provided "AS IS" with no warranties, and confers no rights.