비메오 API 사용법, vimeo iframe API , youtube ifrmae API, 유튜브 동영상 API

<script src="../jquery.min.js"></script>

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js?0096e-1359956898"></script>

<iframe src="http://player.vimeo.com/video/202045606?api=1&title=0&byline=0&portrait=0&badge=0&player_id=player1"

      id="player1" width="800" height="600" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<div>

  <button>Play</button>

  <button>Pause</button>

  <p>Status: <span class="status"></span></p>

</div>

<script>

$(function() {

    var iframe = $('#player1')[0];

    var player = $f(iframe);

    var status = $('.status');

    // When the player is ready, add listeners for pause, finish, and playProgress

    player.addEvent('ready', function() {

        status.text('ready');

        

        player.addEvent('pause', onPause);

        player.addEvent('finish', onFinish);

        player.addEvent('playProgress', onPlayProgress);

    });

    // Call the API when a button is pressed

    $('button').bind('click', function() {

        player.api($(this).text().toLowerCase());

    });

    function onPause(id) {

        status.text('paused');

    }

    function onFinish(id) {

        status.text('finished');

    }

    function onPlayProgress(data, id) {

        status.text(data.seconds + 's played');

    }

});

</script>

-- 팁팁팁팁

동영상 로딩시 아이콘 넣고싶으면 버튼을 대신해줄 div 를 iframe 영역을 덮어서 클릭시  player.api('play');

호출하고 보이고픈 아이콘 display:block 해주고

playProgress 이벤트에서 아이콘에 display:none 을 걸어주자

아이폰 아이패드등 에서 첫번째 플레이가안됨 두번째부턴되는ㄷㅔ (api 함수 안먹힘)

따라스

navigator.userAgent.match(/(iPad|iPhone|iPod)/g) 로 아이폰 걸러내서 처음에 따로 예외처리해주야됨~ 

이거슨 꼼수이므로 알아서,..ㅎㅎㅎㅎ (API 를 이해했다면 꼼수 생각해낼수이씀)

걍 API 설명서가 짱임~

vimeo 참고 사이트 

https://developer.vimeo.com/player/js-api

Player JavaScript API on Vimeo Developer API

developer.vimeo.com

youtube 참고 사이트

https://developers.google.com/youtube/iframe_api_reference?hl=ko

iframe 삽입에 대한 YouTube Player API 참조 문서

developers.google.com

[출처] 비메오 API 사용법, vimeo iframe API , youtube ifrmae API, 유튜브 동영상 API|작성자 맹순이