[Vimeo - 활용하기 1편] Player API 정리

박철현·2024년 12월 9일

vimeo

삽질일지

목록 보기

1/4

Vimeo란?

비메오는 사용자가 직접 제작한 동영상을 업로드하고 공유하며 볼 수 있는 동영상 공유 웹사이트

무엇을 할 수 있나?

개발자용 API를 제공하여 영상 재생 제어, 동영상 로드, 동영상 정보 추출 등 개발자 친화적인 서비스
이걸 활용하면 영상을 업로드하고 특정 회원에게만 영상을 제공하는 프로젝트를 제작할 수 있다.

구현 가능한 프로젝트 예시 - 인터넷 강의 구매하여 수강하는 사이트!

특정 회원은 강의을 구매할 수 있다.
구매한 영상을 Player를 통해 시청하고 시청한 시점을 저장하여 나중에 이어보기를 한다던가 혹은 수강률 등을 구할 수 있다.
- 인강 구매하여 수강하는 서비스..!
다방면으로 활용 가능할 것으로 생각되지 않을까 싶습니다!

Player의 이벤트 종류 개요

Player 자체의 이벤트 : 재생 제어, 이벤트, 오류, 챕터 얻기 등
- 공식 문서
상세 응답값 및 활용법은 위 문서를 참조해주시고, 가볍게 어떤것들이 있는지 보기에 아래 표가 좋을 것 같습니다~!~!

재생제어

명령어	기능
getAutopause()	자동 일시 정지 상태 가져오기
getCurrentTime()	비디오 현재 재생 위치 가져오기(초)
getDuration()	비디오 길이
getEnded()	비디오 종료 상태(true : 종료됨, 비디오 재생 위치 = 길이)
getLoop()	플레이어 루프 상태(true : 재생 종료 시 다시 시작됨)
getPaused()	플레이어 일시 정지 상태 가져오기
getPlaybackRate()	플레이어 재생 속도 얻기
getVolume()	플레이어 볼륨 레벨 얻기
pause()	비디오 일시정지
play()	비디오 재생
setAutopause()	자동 일시 정지 상태 설정
setCurrentTime(seconds)	비디오 재생 위치 설정
setLoop(t/f)	비디오 끝난 직후 시작 부분에서 재생 재개
setPlaybackRate(playbackRate)	플레이어 재생 속도 설정
setValume(volume)	플레이어 볼륨 레벨 설정

재생 컨트롤에 대한 이벤트

종류	설명
bufferend	버퍼링 종료, pre 로드(처음 로드될 때 미리 데이터 다운), 시킹 종료(비디오 특정 위치 이동 → 로딩 과정)
bufferstart	버퍼링 시작, pre로드, 시킹
ended	video 종료될 때 발생하는 이벤트
error	메서드 호출이 오류를 생성한 경우 발생(오류 이벤트 전역적 수신하는 대신 각 메서드 호출에서 .catch 권장)
loaded	새로운 비디오가 플레이어에 로드될 때
pause	비디오가 일시정지 될때 발생
play	비디오가 재생될때 발생
playbackratechange	재생속도 변경될 때 발생
progress	비디오 로딩하는 동안 발생
seeked	특정 위치로 비디오플레이어를 이동했을때 발생 동시에 timeupdate 이벤트도 발생
timeupdate	비디오 재생 위치 변경될 때 발생 - 일반적으로 250ms마다 발생
volume	플레이어의 볼륨이 변경될 때 발생

Player 활용 아이디어

영상 재생 권한 검사
- 로그인한 사용자가 권한이 있는지 Server로 API 요청
- 권한이 있으면 해당 영상의 정보 반환
- iframe 태그로 Vimeo Player 노출
영상의 일시 정지 -> 추후 이어보기 가능
- paused or playbackratechange 이벤트 발생시 API 호출
- 예시로13:10 에 정지
- pause 이벤트 발생 -> 시청 기록 저장 API 호출하여 저장
  - pause 이벤트 반환값
  - 반환값 중 seconds 추출해서 백엔드 서버에 API 호출해서 특정 시간대 저장
```
{
"duration": 61.857, // 영상 총 길이
"percent": 0, // 총길이 대비 몇퍼센트 현재 봤는지
"seconds": 0 // 본 시간 -> 3초대를 봤을때 일시정지 -> 3반환
}
```
- 다음에 영상 재생 권한 검사 시 시청 기록이 있다면 해당 시간 반환
영상의 종료 기록
- 영상 다 봤을때 수강 완료 처리
- ended 이벤트 발생 시 Server에 저장하는 API 호출
- 총 강좌 10강중 3강 완료와 같이 수강율 계산 가능
인프런도 이런 뭔가 비슷한 방식이지 않을까 싶습니다..!

Player 적용하기

사전 Setting

Vimeo 회원가입 & 영상 업로드 & 해당 영상 클릭
- 영상 출처
embeded Code 얻기
player 삽입 코드
- 출처

<html>
<head>
  <title>{page_title}</title>
</head>
<body>

  <iframe src="https://player.vimeo.com/video/{video_id}?h={hash_parameter}" width="{video_width}" height="{video_height}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  <script src="https://player.vimeo.com/api/player.js"></script>
  <script>
    <!- Your Vimeo SDK player script goes here ->
  </script>

</body>
</html>

hash : 비공개 동영상 관련 설정, 영상 비공개 설정은 유료회원 및 보는 사람도 Vimeo에 가입되어 Owner 혹은 팀원으로 등록되어야 볼 수 있음
- 특정 임베드 된 플레이어로 보는데 Vimeo Id도 있어야 하는..
- 자세히는 모르겠습니다.
특정 시점 이어보기 가능
- 특정 타임코드에서 재생하기
- #t=1m2s 형태 이용

적용해보기 1 - player 삽입

크롬 about:blank 접속
개발자도구 Elements -> body 부분 마우스 우클릭 EditHTML
복사한 embeded Code 붙여넣기
player 조작 가능

적용해보기 2 - pause, ended 이벤트 발생 확인

이벤트 리슨 & 콜백함수


<html>
  <head></head>
<body>
    <div style="padding:52.73% 0 0 0;position:relative;">
        <iframe src="https://player.vimeo.com/video/1027182136?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="6583403-uhd_4096_2160_25fps">
        </iframe>
    </div>
    <script src="https://player.vimeo.com/api/player.js"></script>

<script>  
let iframe = document.querySelector('iframe');
let player = new Vimeo.Player(iframe);

    player.on('pause', function() {
            console.log('pause 이벤트 발생');
        });

    player.on('ended', function() {
      console.log('ended 이벤트 발생');
    });

</script>
    
</body>

</html>

codepen 에서 확인
- 코드펜 바로가기
- 크롬에서 하면 이벤트가 추가 안되는듯..
- pause 이벤트 확인

정리

Vimeo의 API를 활용하여 인터넷 강의를 구매하여 수강할 수 있는 사이트를 제작할 수 있다.
- 일시정지 했을때 pause 이벤트 반환값 중 seconds 키값 API 호출
  - 백엔드 단에서 해당 시간은 1h10m10s 와 같이 이어보기 가능한 시점으로 DB 저장
  - 추후 이어보기 했을 때 해당 시간 반환해서 vimeo src 부분에 추가
- 강의 완강했을 때 ended 이벤트 발생
  - 해당 강의 정보와 사용자 정보를 넘겨서 해당 사용자가 해당 영상을 완강했다는 API
  - 완강 data 저장
- 해당 사용자가 영상을 볼 수 있는지 검증
  - 영상 구매 내역을 저장하고 검증해서 유효한지 확인하는 API
  - 유효하다면 iframe HTML 태그에 영상 정보, 이어보기 시점 등의 정보를 넣어서 반환
- 만든 페이지에서 영상의 총 길이 노출
  - 예시 : Java의 Object란? 13:10
  - 13:10 와 같이 영상의 총 길이도 구해서 DB에 영상 정보를 저장한다.
2탄은 Java의 API로 영상의 길이 추출, 파일명 추출 등을 하여 사용자에게 보여줄 때의 데이터를 추출해 보겠슴돠~!
보안 관련 설정들은 Vimeo측에 문의남기면 자주 답변 남겨주니 남겨보는 것이 좋을 것 같습니다~~ 영어로 물어봐야해서 초안 작성하고 파파고 번역해서 올리면 되요!
상세 구현 정보는 공개하지 않겠습니다.