포함(embed)된 동영상 플레이어 API

포함(embed)된 동영상 플레이어 API를 사용하면 포함(embed)된 동영상 플레이어를 제어할 뿐 아니라 플레이어에서 트리거된 이벤트를 관찰할 수 있습니다. 예를 들어 동영상을 일시 정지한 채 이벤트를 듣거나 맞춤 설정 버튼을 사용하여 동영상을 재생할 수 있습니다.

시작하려면 다음 섹션을 따르세요.

설정
플레이어 컨트롤
이벤트 받아보기
플레이어 컨트롤 참조

설정

1. 플러그인 구성

포함(embed)된 동영상 플레이어 문서를 읽고 플러그인 설정 방법에 대해 알아보세요.

2. 포함(embed)된 동영상 플레이어 API 인스턴스 가져오기

포함(embed)된 동영상 플레이어 API 인스턴스를 가져오려면 xfbml.ready를 수신합니다. 메시지 type이 video이면 포함(embed)된 동영상 플레이어에서 ready 이벤트를 실행한 것입니다.

var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video') {
    my_video_player = msg.instance;
  }
});

3. 전체 코드 예시

아래 코드 예시에서는 JavaScript용 Facebook SDK를 초기화할 때 앱 ID를 사용한다고 가정합니다. 아직 앱 ID가 없으면 앱 ID 만들기 문서를 참조하세요.

아래 코드 예시에서 {your-app-id}는 앱 ID로 바꾸고 data-href는 동영상 URL로 바꿉니다. FB.init() 함수를 호출한 다음 xfbml.ready 이벤트를 확인하세요.

<html>
<head>
  <title>Your Website Title</title>
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '{your-app-id}',
        xfbml      : true,
        version    : 'v3.2'
      });
    
      // Get Embedded Video Player API Instance
      var my_video_player;
      FB.Event.subscribe('xfbml.ready', function(msg) {
        if (msg.type === 'video') {
          my_video_player = msg.instance;
        }
      });
    };
  </script>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

  <!-- Your embedded video player code -->
  <div  
    class="fb-video" 
    data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
    data-width="500" 
    data-allowfullscreen="true"></div>

</body>
</html>

여러 플레이어 처리

한 페이지에서 여러 플레이어를 사용하는 경우 다음과 같이 id 속성을 동영상 플레이어 태그에 추가하고 msg 개체에서 id를 확인하여 동영상 플레이어를 식별할 수 있습니다.

<div id="my-video-player-id" ... />
<script>
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video' && msg.id === 'my-video-player-id') {
     // True for <div id="my-video-player-id" ...
     my_video_player = msg.instance;
  }
});
</script>

플레이어 컨트롤

일련의 함수를 호출하여 동영상 플레이어를 제어하거나 현재 재생 위치와 같은 현재 상태를 얻을 수 있습니다.

사용 예시

// Start video playback
my_video_player.play();

// Check whether video is muted
if (my_video_player.isMuted()) {
  // Video is muted
}

// Jump to second 5 of the video
my_video_player.seek(5);

플레이어 컨트롤 참조

이벤트 받아보기

subscribe() 함수는 지정된 이벤트(예: startedPlaying)의 리스너 함수를 추가합니다.

var myEventHandler = my_video_player.subscribe('startedPlaying', function(e) {
  // Video started playing ...
});

이벤트 받아보기 삭제

subscribe() 함수에서 release 메서드를 사용하여 토큰을 반환합니다. 이 메서드를 호출하면 이벤트에서 리스너를 다시 삭제합니다.

myEventHandler.release('startedPlaying');

이벤트 참조

플레이어 컨트롤 참조

일련의 함수를 호출하여 동영상 플레이어를 제어하거나 현재 재생 위치와 같은 현재 상태를 얻을 수 있습니다.

함수	설명	인수(유형)
`play()`	동영상을 재생합니다.
`pause()`	동영상을 일시 정지합니다.
`seek(seconds)`	지정된 위치를 찾습니다.	`seconds` (`number`)
`mute()`	동영상의 소리를 끕니다.
`unmute()`	동영상의 소리 끄기를 취소합니다.
`isMuted()`	동영상의 소리가 꺼진 경우 `true`, 꺼지지 않으면 `false`입니다.
`setVolume(volume)`	지정된 수로 볼륨을 설정합니다(`float`, `0` ~ `1` 범위).	`volume` (`float`)
`getVolume()`	동영상의 현재 볼륨을 반환합니다(`float`,`0` ~ `1` 범위).
`getCurrentPosition()`	현재 동영상 시간 위치(초)를 반환합니다.
`getDuration()`	동영상의 길이(초)를 반환합니다.
`subscribe(event, eventCallback)`	지정된 이벤트의 리스너 함수를 추가합니다. 이벤트에 대한 상세 정보는 이벤트 받아보기 섹션을 참조하세요. `release` 메서드를 사용하여 토큰을 반환합니다. 이 메서드를 호출하면 이벤트에서 리스너를 다시 삭제합니다.	`event` (`string`), `eventCallback` (`function`)

이벤트 참조

이벤트	설명
`startedPlaying`	동영상을 재생하면 실행됩니다.
`paused`	동영상이 일시 정지하면 실행됩니다.
`finishedPlaying`	동영상이 종료하면 실행됩니다.
`startedBuffering`	동영상이 버퍼링하면 실행됩니다.
`finishedBuffering`	동영상이 버퍼링에서 복구되면 실행됩니다.
`error`	동영상에서 오류가 발생하면 실행됩니다.