Forum Moderators: open
How is that done?
I have an application where users are viewing a stream from a third party interface. I need to be able to document that they are watching the video by using a inactivity prompt of some sort that logs to the database each time they click it. The stream may be 2 hours in length so they will get the prompt six times during their session.
I've searched high and low and believe it or not cannot find the exact solution. I hate asking these types of questions cause someone will come along and say; "pageoneresults, I can't believe you didn't know how to do that". Well, there is quite a bit I don't know how to do. That's why I come to WebmasterWorld!
This is a classic asp application if that helps. We were thinking JavaScript but not 100% sure that is the best solution, especially with the percentage of users who may have JS turned off.
One thing about JavaScript Timeouts: You only get one per window at a time. You can't have multiple timeouts going at once. I see AJAX stuff getting scragged by this all the time.
Ignore my post. Sorry about that.
Reading comprehension: I've heard of it.
Another possibility would be to use -ick- frames. Use meta refresh in the sidecar frame.
The basic idea would be to imbed the stream on a page that has javascript that promotes a css layer to obscure some or all of the video until it is clicked. If the obscuring layer is not clicked within a set time you could navigate away from the page thus saving bandwidth and collecting data on how long the video was watched for.
Not difficult in theory (don't know about practice), but it depends what data you want back and whether imbedding is an option.
I have an application where users are viewing a stream from a third party interface. I need to be able to document that they are watching the video by using a inactivity prompt of some sort that logs to the database each time they click it.
While I don't have code, here's probably how I would approach this, but this would of course be Javascript dependent.
Use setTimeout() to set a variable with a 20 minute trigger, and set a cookie. The cookie may only be important if you wish to register particular links clicked over a series of pages - that is, they clicked a video link 5 minutes ago and have traversed 10 pages in that 5 minutes without clicking another one, you could keep track of where they are in the 20 minute stretch. If you just want a single-page 20 minute timer, you can do without the cookie.
This is one instance where Ajax would apply, when the 20 minutes is up, toss up your prompt, something like
stay_logged_in = prompt('Stay logged in?');
If true, reset the timeout var, then use Ajax methods to update the database without refreshing the page. Seems like this would be important, I'd hit the roof if I'm 20 minutes onto a video and the page refreshed. :-D
One thing about JavaScript Timeouts: You only get one per window at a time. You can't have multiple timeouts going at once. I see AJAX stuff getting scragged by this all the time.
That is incorrect. You can have multiple timeouts. Here's an example that proves it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Multiple Timeouts</title>
</head>
<body id="theBody">
<script type="text/javascript">
window.onload = function() {
var b = document.getElementById('theBody');
var t1 = setTimeout(function(){b.style.backgroundColor = '#f00';},2000);
var t2 = setTimeout(function(){b.style.backgroundColor = '#ccf';},4000);
b.appendChild(document.createTextNode("t1 = " + t1 + ", t2 = " + t2));
};
</script>
</body>
</html>
We were thinking JavaScript but not 100% sure that is the best solution, especially with the percentage of users who may have JS turned off.
You're talking about interacting with the user client side, so JavaScript is your only real choice. You might be able to use Flash or a Java applet, but for what you're trying to do JavaScript is the best choice.
What do you want to happen if the user doesn't click it? Will the page redirect away from the video?
I would think you'll need:
1. A timeout (set to 20 minutes) to prompt the user
2. Another timeout (for the time to wait for input from the user)
3. Some AJAX to communicate to the server the user clicks (alternatively, you could have your "prompt" open a new window, where clicking on something in that window would submit the data to server)
I had just assumed it was a single-threading issue, and I've always operated on that theory.
Thanks for enlightening me.
Ah! I just figured it out! It's because the AJAX functions in question keep replacing the timeout target function!
That's easy enough to deal with.
What do you want to happen if the user doesn't click it? Will the page redirect away from the video?
You've pretty much outlined it below...
I would think you'll need:
1. A timeout (set to 20 minutes) to prompt the user
2. Another timeout (for the time to wait for input from the user)
3. Some AJAX to communicate to the server the user clicks (alternatively, you could have your "prompt" open a new window, where clicking on something in that window would submit the data to server)
Let me describe the environment. The user is watching a 2 hour stream. That stream comes from a third party resource and is served as a direct link which launches the users media player. So they are now offsite watching the stream.
We need to be able to confirm that they are watching the stream, or at least logged in the entire time, using these prompts. The prompt would be a new "small" window that they would need to click within 2 minutes. If they don't, they are logged out of their session and have to start over again.
Each time they click that prompt, we are recording to the database, calculating the total time and then displaying that in the user record as confirmation that they "at least" spent 2 hours in an online session. Now, whether they watch the stream or not is another question. And yes, we are preparing for a complete DRM solution but right now I need to "make it work" and "git r done".
Hmmm, now that I reread this, I can think of other logistical issues like what happens if our system closes their session? The stream will still be playing in their player. Maybe we make the prompt window a bit larger and make sure it displays on top. But, can we do that?
Lots of challenges presented in a streaming environment. Especially if you are learning as you go along and don't have the budget for a real world DRM environment. ;)
1. Create your own namespace to avoid global conflicts (this is just good practice, not specific to your situation):
// FOTI namespace
FOTI = window.FOTI ¦¦ {};
2. Create a self invoking object which will behave like a singleton.
FOTI.InactivePrompt = function() {
return {
init : function() {
}
};
}();
3. Add a private variables to store:
- your prompt timeout
- your input timeout (time for the user to take action when the session is about to expire)
- the amount of time to wait before prompting
- the amount of time to wait for the user's input
FOTI.InactivePrompt = function() {
var promptTimeout = null;
var inputTimeout = null;
var timeoutMins = 1000 * 60 * 20; // 20 minutes
var waitForInput = 1000 * 60 * 2; // 2 minutes
return {
init : function() {
}
};
}();
4. Next add your private methods to call when it's time to prompt the user, and also when the user doesn't keep the session alive, and start the first timer in your init method:
FOTI.InactivePrompt = function() {
var promptTimeout = null;
var inputTimeout = null;
var timeoutMins = 1000 * 60 * 20; // 20 minutes
var waitForInput = 1000 * 60 * 2; // 2 minutes
var endSession = function() {
// User did not respond in time, or selected not to continue the session
};
var notifyUser = function() {
// Start the other timer
inputTimeout = setTimeout(endSession,waitForInput);
var stickAround = confirm("You wanna continue?");
if( stickAround ) {
// Stop the input timer and reset the prompt timer
clearTimeout(inputTimeout);
promptTimeout = setTimeout(notifyUser,timeoutMins);
}
};
return {
init : function() {
promptTimeout = setTimeout(notifyUser,timeoutMins);
}
};
}();
5. Call the init method when your page loads:
window.onload = FOTI.InactivePrompt.init;
This is a pretty good starting foundation. Ultimately, you probably don't want to use a confirm dialog because it's blocking (will stop your script from continuing execution). But this might get you started in the right direction at least.
I have a funny feeling that we're going to end up moving into an embedded environment so we have more control over those streams. That seems to be the general consensus from our side. It may not be worth all the work arounds. We're going to test and see.
Thanks again everyone for your input. I like these kind of brainstorming sessions at this level. ;)
