Security

Reply
Frequent Contributor II

HOW TO: Force visitor to watch video before login with Internal CP

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:

-----------------------------------
-ACMX #352-
Remember to Kudo if a post helped you! || Problem Solved? Click "Accept as Solution" in a post!
Search Airheads
cancel
Showing results for 
Search instead for 
Did you mean: