Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기

비메오 동영상을 특정 웹사이트에 포함하는 경우 

보통 아래와 같이 임베드코드를 삽입하는 방식을 사용하는데요

<iframe src="https://player.vimeo.com/video/59777392?loop=1" 

width="640" height="360" frameborder="0" 

webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

API 를 이용하면 비메오 플레이어에 직접 접근하여

플레이어를 플레이하거나 멈추거나 소리를 키우거나 

특정위치로 가게하는 등의 작업이 가능합니다.

아래와 같이 기존의 iframe 임베드를 포함하여도 되고

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>

<script>

    var iframe = document.querySelector('iframe');

    var player = new Vimeo.Player(iframe);

    player.on('play', function() {

        console.log('played the video!');

    });

    player.getVideoTitle().then(function(title) {

        console.log('title:', title);

    });

</script>

아래와 같이 동적으로 플레이어를 생성할 수도 있습니다.

<div id="made-in-ny"></div>

<script src="https://player.vimeo.com/api/player.js"></script>

<script>

    var options = {

        id: 59777392,

        width: 640,

        loop: true

    };

    var player = new Vimeo.Player('made-in-ny', options);

    player.setVolume(0);

    player.on('play', function() {

        console.log('played the video!');

    });

</script>

플레이어 생성후에는 각종 method 와 event 를 컨트롤 할 수 있는데요

아래 리스트가 사용가능한 method 입니다.

◦on

◦off

◦loadVideo

◦ready

◦enableTextTrack

◦disableTextTrack

◦pause

◦play

◦unload

◦getAutopause

◦setAutopause

◦getColor

◦setColor

◦addCuePoint

◦removeCuePoint

◦getCuePoints

◦getCurrentTime

◦setCurrentTime

◦getDuration

◦getEnded

◦getLoop

◦setLoop

◦getPaused

◦getPlaybackRate

◦setPlaybackRate

◦getTextTracks

◦getVideoEmbedCode

◦getVideoId

◦getVideoTitle

◦getVideoWidth

◦getVideoHeight

◦getVideoUrl

◦getVolume

◦setVolume

아래 리스트는 사용가능한 event 입니다

◦play

◦pause

◦ended

◦timeupdate

◦progress

◦seeked

◦texttrackchange

◦cuechange

◦cuepoint

◦volumechange

◦playbackratechange

◦bufferstart

◦bufferend

◦error

◦loaded

아래 링크에 가면 자세한 내용을 볼 수 있습니다

https://github.com/vimeo/player.js#create-a-player

비메오에서는 개발자를 위한 정보도 별도로 제공하고 있습니다

https://developer.vimeo.com/player

비메오 API 는 동영상의 화질을 조절하는 method 는 제공하지 않는데요,

Vimeo Plus, PRO, and Business 로 업그레이드 하게되면 

아래와 같이 사용가능합니다.

https://player.vimeo.com/video/157588560?autoplay=1&quality=1080p