Security

Recently we had an occasion to have a random video play before moving clients to the click to accept page.

Configure the as a Webpage and the inital captive portal page in the L3 captive portal authentication, that will then reference / redirect to the click to accept page after the video has played.

Uses Videojs loaded locally so we don't have to go off site in a Captive Portal.
Load video.min.js and video-js.min.css from video.js (https://videojs.com/) to the public files section.
You can use a sub folder if you wish just be sure to change the change the script to point to the new location in ClearPass

Use FFMPEG, Handbreak etc. to create mp4/webm file formats, multiple formats are needed depending on the device that is going to be plating the video.
Remeber there's a 15 meg limit on the files so choose your encoding appropriately.

We are using the "fluid" function to allow the video to fill the entire space available in the section.

iPhones didn't like the autoplay until we added the "playsinline" function.

Upload your videos to ClearPass and replace the example videos (http://vjs.zencdn.net/v/oceans.mp4 http://vjs.zencdn.net/v/oceans.webm http://vjs.zencdn.net/v/oceans.ogv ) below.

Randomized Video uses shared code from https://afp.arubanetworks.com/afp/index.php/How-to:_Galleria_Skin / https://gist.github.com/srobbin/3799775 to randomize the video selection in an array.

Also see:

https://docs.videojs.com/tutorial-options.html#autoplay

https://docs.videojs.com/docs/guides/options.html

https://blog.videojs.com/autoplay-best-practices-with-video-js/

{literal}
<script src="public/video.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="public/video-js.min.css">
<style >
    .nonav-container {
        width: 100%;
        max-width: 100%;
    }
</style>
{/literal}

<video-js id="Video-Player1" autoplay playsinline muted fluid ></video-js>

{literal}
<script>
var Video1 = [
{type: 'video/mp4', src: 'http://vjs.zencdn.net/v/oceans.mp4'},
{type: 'video/webm', src: 'http://vjs.zencdn.net/v/oceans.webm'}
];

var Video2 = [
{type: 'video/mp4', src: 'http://vjs.zencdn.net/v/oceans.mp4'},
{type: 'video/webm', src: 'http://vjs.zencdn.net/v/oceans.webm'}
];

var Video3 = [
{type: 'video/mp4', src: 'http://vjs.zencdn.net/v/oceans.mp4'},
{type: 'video/webm', src: 'http://vjs.zencdn.net/v/oceans.webm'}
];

// Array of Arrays to be randomly referenced.
var VideoArray = [
    Video1,
    Video2,
    Video3
];

// Get a random number between 0 and the number of videos
var randomNumber = Math.floor( Math.random() * VideoArray.length );


var myPlayer1 = videojs('Video-Player1', {
fluid: true 
});

myPlayer1.src([
VideoArray[randomNumber]
]);

myPlayer1.on('ended', function() {
window.location.href = "https://<ClearPass.FQDN.com>/guest/<Click-to-Accept-Page>.php";
this.dispose();
});
</script>
{/literal}

If anyone has a better solution please post. All autoplay notes basically say don't assume it will work.

There seemed to be better solutions but they all appeared to either require off site references such as youtube (https://afp.arubanetworks.com/afp/index.php/How-to:_ClearPass_Guest_Advertising), or really complex to implement.