sperand-io/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes">
        <title>Vimeo Froogaloop API Playground</title>
        <script>
            /* Don't forget your analytics.js snippet :) */
        </script>
    </head>
    <body>
        <div class="wrapper">
            <hgroup>
                <h1>Vimeo Segment Example</h1>
            </hgroup>
            <div class="container">
                <div>
                    <h2>Vimeo Player 1</h2>
                    <iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0"></iframe>
                </div>
            </div>

        <script>
        $(function() {
            var player = $('#player_1');
            var playerOrigin = '*';

            // Listen for messages from the player
            if (window.addEventListener) {
                window.addEventListener('message', onMessageReceived, false);
            }
            else {
                window.attachEvent('onmessage', onMessageReceived, false);
            }

            // Handle messages received from the player
            function onMessageReceived(event) {
                // Handle messages from the vimeo player only
                if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
                    return false;
                }

                if (playerOrigin === '*') {
                    playerOrigin = event.origin;
                }

                var data = JSON.parse(event.data);

                switch (data.event) {
                    case 'ready':
                        onReady();
                        break;

                    case 'play':
                        onPlay(data.data);
                        break;

                    case 'playProgress':
                        onPlayProgress(data.data);
                        break;

                    case 'pause':
                        onPause(data.data);
                        break;

                    case 'finish':
                        onFinish(data.data);
                        break;
                }
            }

            // Helper function for sending a message to the player
            function post(action, value) {
                var data = {
                  method: action
                };

                if (value) {
                    data.value = value;
                }

                var message = JSON.stringify(data);
                player[0].contentWindow.postMessage(data, playerOrigin);
            }

            function onReady() {
                post('addEventListener', 'play');
                post('addEventListener', 'pause');
                post('addEventListener', 'finish');
                post('addEventListener', 'playProgress');
            }

            function onPlay(data) {
                analytics.track('Video Played')
            }

            function onPause(data) {
                analytics.track('Video Paused')
            }

            function onFinish(data) {
                analytics.track('Video Finised')
            }

            function onPlayProgress(data) {
                var quartile;
                if (data.percent % 25 === 0) {
                    quartile = data.percent / 25;
                    analytics.track('Video Progress', {
                        quartile: quartile
                    })
                }
            }
        });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes">
	<title>Vimeo Froogaloop API Playground</title>
	<script>
	/* Don't forget your analytics.js snippet :) */
	</script>
	</head>
	<body>
	<div class="wrapper">
	<hgroup>
	<h1>Vimeo Segment Example</h1>
	</hgroup>
	<div class="container">
	<div>
	<h2>Vimeo Player 1</h2>
	<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" width="540" height="304" frameborder="0"></iframe>
	</div>
	</div>

	<script>
	$(function() {
	var player = $('#player_1');
	var playerOrigin = '*';

	// Listen for messages from the player
	if (window.addEventListener) {
	window.addEventListener('message', onMessageReceived, false);
	}
	else {
	window.attachEvent('onmessage', onMessageReceived, false);
	}

	// Handle messages received from the player
	function onMessageReceived(event) {
	// Handle messages from the vimeo player only
	if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
	return false;
	}

	if (playerOrigin === '*') {
	playerOrigin = event.origin;
	}

	var data = JSON.parse(event.data);

	switch (data.event) {
	case 'ready':
	onReady();
	break;

	case 'play':
	onPlay(data.data);
	break;

	case 'playProgress':
	onPlayProgress(data.data);
	break;

	case 'pause':
	onPause(data.data);
	break;

	case 'finish':
	onFinish(data.data);
	break;
	}
	}

	// Helper function for sending a message to the player
	function post(action, value) {
	var data = {
	method: action
	};

	if (value) {
	data.value = value;
	}

	var message = JSON.stringify(data);
	player[0].contentWindow.postMessage(data, playerOrigin);
	}

	function onReady() {
	post('addEventListener', 'play');
	post('addEventListener', 'pause');
	post('addEventListener', 'finish');
	post('addEventListener', 'playProgress');
	}

	function onPlay(data) {
	analytics.track('Video Played')
	}

	function onPause(data) {
	analytics.track('Video Paused')
	}

	function onFinish(data) {
	analytics.track('Video Finised')
	}

	function onPlayProgress(data) {
	var quartile;
	if (data.percent % 25 === 0) {
	quartile = data.percent / 25;
	analytics.track('Video Progress', {
	quartile: quartile
	})
	}
	}
	});
	</script>
	</body>
	</html>