비메오 동영상을 특정 웹사이트에 포함하는 경우
보통 아래와 같이 임베드코드를 삽입하는 방식을 사용하는데요
<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
아래 링크에 가면 자세한 내용을 볼 수 있습니다
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
추천 : 