YuheiNakasaka · September 23, 2015 13:04
diff --git a/vimeo-js-api-test.html b/vimeo-js-api-test.html
 <html>
 <head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <style type="text/css">
 div {
  margin-top: 3px;
  padding: 0 10px;
 }

 button {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 18px 10px;
  line-height: 1;
  color: #fff;
  background: #345;
  border: 0;
  border-radius: 4px;
  margin-left: 0.75em;
 }

 p {
  display: inline-block;
  margin-left: 10px;
 }

 </style>
 </head>
 <body>
 <iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

 <div>
  <button>Play</button>
  <button>Pause</button>
  <p>Status: <span class="status">&hellip;</span></p>
 </div>
 <script type="text/javascript">
 $(function() {
    var player = $('iframe');
    var playerOrigin = '*';
    var status = $('.status');

    // 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 'loadProgress':
                status.text('loadProgress');
                break;
            case 'ready':
                onReady();
                break;

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

            case 'pause':
                onPause();
                break;

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

    // Call the API when a button is pressed
    $('button').on('click', function() {
        post($(this).text().toLowerCase());
    });

    // 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() {
        status.text('ready');
        post('play'); // I added this line for automatic play.
        post('addEventListener', 'pause');
        post('addEventListener', 'finish');
        post('addEventListener', 'loadProgress');
        post('addEventListener', 'playProgress');
    }

    function onPause() {
        status.text('paused');
    }

    function onFinish() {
        status.text('finished');
    }

    function onPlayProgress(data) {
        status.text(data.seconds + 's played');
    }
 });

 </script>
 </body>
 </html>
	<html>
	<head>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<style type="text/css">
	div {
	margin-top: 3px;
	padding: 0 10px;
	}

	button {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 18px 10px;
	line-height: 1;
	color: #fff;
	background: #345;
	border: 0;
	border-radius: 4px;
	margin-left: 0.75em;
	}

	p {
	display: inline-block;
	margin-left: 10px;
	}

	</style>
	</head>
	<body>
	<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

	<div>
	<button>Play</button>
	<button>Pause</button>
	<p>Status: <span class="status">…</span></p>
	</div>
	<script type="text/javascript">
	$(function() {
	var player = $('iframe');
	var playerOrigin = '*';
	var status = $('.status');

	// 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 'loadProgress':
	status.text('loadProgress');
	break;
	case 'ready':
	onReady();
	break;

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

	case 'pause':
	onPause();
	break;

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

	// Call the API when a button is pressed
	$('button').on('click', function() {
	post($(this).text().toLowerCase());
	});

	// 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() {
	status.text('ready');
	post('play'); // I added this line for automatic play.
	post('addEventListener', 'pause');
	post('addEventListener', 'finish');
	post('addEventListener', 'loadProgress');
	post('addEventListener', 'playProgress');
	}

	function onPause() {
	status.text('paused');
	}

	function onFinish() {
	status.text('finished');
	}

	function onPlayProgress(data) {
	status.text(data.seconds + 's played');
	}
	});

	</script>
	</body>
	</html>