티스토리 뷰
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes">
<title>Vimeo Player API Playground</title>
<link rel="stylesheet" href="http://a.vimeocdn.com/p/1.4.28/css/api_examples.css">
</head>
<body>
<div class="wrapper">
<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" webkitallowfullscreen></iframe>
<iframe id="player_2" src="http://player.vimeo.com/video/42316497?api=1&player_id=player_2" width="540" height="304" frameborder="0" webkitallowfullscreen></iframe>
<dl class="simple">
<dt>Simple Buttons <span>(buttons with simple API calls)</span></dt>
<dd><button class="play">Play</button></dd>
<dd><button class="pause">Pause</button></dd>
<dd><button class="unload">Unload</button></dd>
</dl>
</div>
</div>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js?0096e-1359956898"></script>
<script>
(function(){
// Listen for the ready event for any vimeo video players on the page
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
/**
* Utility function for adding an event. Handles the inconsistencies
* between the W3C method for adding events (addEventListener) and
* IE's (attachEvent).
*/
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
}
else {
element.attachEvent('on' + eventName, callback);
}
}
/**
* Called once a vimeo player is loaded and ready to receive
* commands. You can add events and make api calls only after this
* function has been called.
*/
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id);
/**
* Sets up the actions for the buttons that will perform simple
* api calls to Froogaloop (play, pause, etc.). These api methods
* are actions performed on the player that take no parameters and
* return no values.
*/
function setupSimpleButtons() {
var buttons = container.querySelector('div dl.simple'),
playBtn = buttons.querySelector('.play'),
pauseBtn = buttons.querySelector('.pause'),
unloadBtn = buttons.querySelector('.unload');
// Call play when play button clicked
addEvent(playBtn, 'click', function() {
froogaloop.api('play');
}, false);
// Call pause when pause button clicked
addEvent(pauseBtn, 'click', function() {
froogaloop.api('pause');
}, false);
// Call unload when unload button clicked
addEvent(unloadBtn, 'click', function() {
froogaloop.api('unload');
}, false);
}
setupSimpleButtons();
}
})();
</script>
</body>
</html>
[출처] [Vimeo Apis] 영상 제어 Apis (GNN 연구소) |작성자 UTEoL
'program' 카테고리의 다른 글
| [MySQL] 세로열을 가로열로 출력하기 (0) | 2017.02.03 |
|---|---|
| [iBatis] NUMBER(INT) 타입 컬럼 처리 시 cast 오류 발생 (0) | 2017.02.03 |
| 비메오 API 사용법, vimeo iframe API , youtube ifrmae API, 유튜브 동영상 API (0) | 2017.02.02 |
| jquery 팝업 차단 없이 띄우기 (0) | 2017.01.31 |
| [웹/ spring] java에... 확인하기 user-agent (0) | 2016.12.30 |