Thought I would share my latest Captive Portal creation :)
By using existing JS libraries, it is possible to force the user to watch a video before he is able to log on to the guest network.
This is a great opportunity for some advertising or similar that some end-customers are interested in.
In my example, I am using 2 readily available JS libraries:
Video.js
and
jQuery
The video.js is a library that utilizes the html5 video possibilities. So since this is html5 you need to be aware that this method requires relatively new browsers.
It should be compatible with at least:
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
jQuery is used for easy DOM manipulation of the page. In this case it means that it is the library that we use when the video is done playing and we are displaying the login form.
Note that this script should be understood as a proof of concept. It is not thoroughly tested on different platforms, and it needs some kind if fallback if your client does not support html5 or JavaScript.
This code is saved as a *.html file and uploaded as Captive Portal Login:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Aruba Wireless Awesomeness</title>
<link rel="stylesheet" type="text/css" media="all" href="video-js.min.css" />
<script type='text/javascript' src='video.js'></script>
<script type='text/javascript' src='jquery.js'></script>
<script>
test = videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" autoplay preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
<script>
var myPlayer = videojs("example_video_1");
var myFunc = function(){
var myPlayer = this;
var htmlform = '<form name="form1" method="post" action="/auth/index.html/u"><span class="bodytext"><input type="text" id="email" name="email" type="text" value="user@company.com" class="text" accesskey="e" /><input type="hidden" name="cmd" value="authenticate" /><input type="submit" name="Login" value="Logg inn" class="button" /></span></form>';
$('body').html(htmlform);
};
myPlayer.on("ended", myFunc);
</script>
</body>
</html>
Download jquery HERE and save as "jquery.js" - upload as "content"
Download video.js as a .zip file HERE. Extract the "video.js" and "video-js.min.css" files - upload as "content"
For the example video to work. you need to remember to allow traffic to "video-js.zencoder.com" in your logon-role. That should be IP: 54.230.129.145. This is taken straight from the official video.js demo, so the video and/or server is not mine. For your setup, the best thing to do is to put this video files in a server on your network.
If you need more info about the jquery and/or video.js library, go to their web site and read the Docs. :smileywink: