demo/index.html from MailOnline/VPAIDHTML5Client

demo/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VPAIDHTML5Client</title>
    <link rel="stylesheet" href="demo.css">
    <script type="text/javascript" src="VPAIDHTML5Client.js"></script>
</head>
<body>
    <div style="position: relative; width:480px; height:360px;">
        <button id="skipAd">Skip ad</button>
        <div id="myContent" style="position: absolute; top: 0; left: 0; z-index: 1; width: 480px; height: 360px;"></div>
        <video width="480" height="360" id="myVideo" controls>
            <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
        </video>
    </div>
    <script>
        var el = document.getElementById('myContent');
        var video = document.getElementById('myVideo');
        var skipAd = document.getElementById('skipAd');
        var vpaid = new VPAIDHTML5Client(el, video, {});
        var urls = [
                {
                    url: 'http://cdn-assets.brainient.com/2015/mailonline_example/vpaid.js',
                    adParameters: ''
                },
                {
                    url: 'VPAIDAdLinear.js',
                    adParameters: JSON.stringify(
                        {
                            videos: [
                                {
                                    url: 'http://video.webmfiles.org/big-buck-bunny_trailer.webm',
                                    mimetype: 'video/webm'
                                },
                                {
                                    url: 'http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4',
                                    mimetype: 'video/mp4'
                                }
                            ],
                            clickThru: {
                                playerHandles: false,
                                trackID: 123,
                                url: 'http://www.dailymail.com'
                            }
                        }
                    )
                }
        ];

        function getRandomAd() {
            return urls[Math.round( (urls.length - 1) * Math.random())];
        }

        var currentAd = getRandomAd();

        vpaid.loadAdUnit(currentAd.url, onLoad);

        function onLoad(err, adUnit) {
            if (err) {
                console.log(err);
                return;
            }

            adUnit.subscribe('AdLoaded', onInit);

            [
                'AdStopped',
                'AdSkipped',
                'AdSizeChange',
                'AdLinearChange',
                'AdDurationChange',
                'AdExpandedChange',
                'AdRemainingTimeChange', // [Deprecated in 2.0] but will be still fired for backwards compatibility
                'AdVolumeChange',
                'AdImpression',
                'AdVideoStart',
                'AdVideoFirstQuartile',
                'AdVideoMidpoint',
                'AdVideoThirdQuartile',
                'AdVideoComplete',
                'AdInteraction',
                'AdUserAcceptInvitation',
                'AdUserMinimize',
                'AdUserClose',
                'AdPaused',
                'AdPlaying',
                'AdLog',
                'AdError'
            ].forEach(function(event) {
                adUnit.subscribe(event, function() {
                    console.log('---------------------------------------> ' + event, 'arguments:', arguments);
                })
            });

            adUnit.subscribe('AdSkippableStateChange', function () {
                skipAd.style.display = 'block';
                console.log('---------------------------------------> AdSkippableStateChange', 'arguments:', arguments);
            });


            adUnit.subscribe('AdClickThru', function (clickData) {
                console.log('---------------------------------------> AdClickThru', 'arguments:', arguments);
                if (clickData.playerHandles) {
                    window.open(clickData.url, '_blank');
                }
            });

            adUnit.subscribe('AdStarted', function () {
                console.log('---------------------------------------> AdStarted');
                adUnit.setAdVolume(0);
            });

            skipAd.addEventListener('click', function() {
                adUnit.skipAd();
            });

            adUnit.handshakeVersion('2.0', onHandShake);

            function onHandShake(error, result) {
                console.log('-------------------------------> onHandShake');
                console.log('version:', result);
                adUnit.initAd(480, 360, 'normal', -1, {AdParameters: currentAd.adParameters}, {}, function(err) {
                    console.log('error?', err);
                });
            }

            function onInit() {
                console.log('------------------------------> AdLoaded');
                adUnit.startAd(function (error) {
                    console.log('startAd', error);
                });
            }
        }
    </script>
</body>
</html>