vimeo 컴포넌트 학습시간 측정

부가설명
- 누적 재생시간 계산 ( 배속변경, 위치이동, 중단 후 재개 등 다 고려 )
Tags
React
component

학습시간 측정 (Date 활용)

[고려사항]

## prevTime = 기준시간
## doneTime = 누적시간

1. 플레이 시작 시 측정기준이 될 시작시간을 기록함.
	[playing 이벤트]
	: 기준시간 = 현재시각으로 설정/갱신

2. 주기적으로 누적시간 갱신 (1초간격)
	[timeupdate 이벤트]
	: 누적시간 += (현재시각 - 기준시간)*배속;
	: 기준시간 = 현재시각으로 갱신;

3. pause 시에는 ?
	: 일시정지 상태에선 timeupdate 이벤트가 발생하지 않으므로 일시정지 상태에서 누적시간이 증가되는 것은 방지됨.
	: 하지만 일시정지를 풀 때, 현재시간이 기준시간과의 간격이 이미 벌어진 상태이므로 듣지 않았음에도 누적시간 확 늘어남.
			[pause 이벤트]
			=> 현재까지의 누적시간 저장하고
			[playing 이벤트]
			=> 일시정지 해제 시, 기준시간을 현재시간으로 갱신하고 새로 측정 시작.

4. 도중에 배속 변경 시에는?
	[playbackratechange 이벤트]
	: 지금까지 이전 배속으로 들은 누적시간 저장하고
	: 기준시간을 현재시간으로 갱신함.

5. 시점 이동 시에는?
	이미 구현한 playing과 timeupdate 이벤트 핸들러 함수에서 처리되므로 고려하지 않아도 됨.

6. ended 시에는
	[ended 이벤트]
	: 누적시간 갱신
	[playing 이벤트]
	: re-playing 시 기준시간 다시 설정

일반 재생

 

pause 후 재개

 

ended 이후 다시 듣기

 

재생 중 시간 변경

 

pause 후 시간변경

 

재생 중 배속변경

 

pause 후 배속변경

 

학습시간 측정 (player currentTime 활용)

이벤트 발생 시 전달인자에 현재 재생위치가 전달되므로
await Date.now() 기다리는 시간 줄일 수 있을듯
코드 백업
import React, { useState, useEffect } from "react";

//플레이어 constructor 임포트
import Player from '@vimeo/player'


/* *********************************************** */
//race condition 문제가 있을 수 있음. ==> atomic 하게 실행하도록 패치해야함.
/* *********************************************** */

//id 번호만 받아오면 됨.
const VimeoCT = ({ id = 479517196 }) => {

  useEffect(() => {
    //플레이어 옵션 설정
    const options = {
      id: id,
      width: 500, //플레이어 가로
      controls: true, //컨트롤러 표시 여부
      title: false, //영상 타이틀 출력
      byline: false, //영상 제작자 표시
      portrait: false, //vimeo 프로필 초싱화
    }

    //플레이어 생성
    const myPlayer = new Player('divVimeo', options)

    //지역변수 초기화
    let doneTime = 0;
    let prevTime = 0;
    let timeupdateInterval = 0; //업데이트 간격 : 250ms * timeupdateInterval
    let curPlaybackRate = 1;
    let paused = false;

    /* ------------ 이벤트 처리 관련 함수 정의 ------------ */
    //누적시간, 기준시간 갱신 함수 
    const updateTimes = async ({ seconds = -1 }) => {
      let currentTime = 0;
      if (seconds === -1)
        currentTime = await myPlayer.getCurrentTime();
      else
        currentTime = seconds;

      doneTime += (currentTime - prevTime) * (curPlaybackRate); //현재까지 누적시간 저장
      prevTime = currentTime; //기준시간 갱신
    }

    const playing = ({ seconds }) => {
      prevTime = seconds;   //기준시간 기록/갱신
      paused = false;
      console.log("[playing] prevTime", prevTime);
    }

    const pause = ({ seconds }) => {
      paused = true;
      doneTime += (seconds - prevTime) * (curPlaybackRate);  //현재까지 누적시간 저장
      console.log("[pause] prevTime", prevTime);
    }

    const timeupdate = ({ seconds }) => {
      timeupdateInterval++;
      if (timeupdateInterval % 4 === 0) { //1초간격
        timeupdateInterval = 0;
        if (paused === false) {
          updateTimes(seconds)
          console.log("[timeupdate] doneTime초 누적해서 들었음.", doneTime);
        }
      }
    }

    const playbackratechange = ({ playbackratechange }) => {
      curPlaybackRate = playbackratechange;
      if (paused === false) {
        updateTimes()
      }
    }

    const ended = ({ seconds }) => {
      updateTimes(seconds)
      console.log("[ended] doneTime초 누적해서 들었음.", doneTime);
    }

    /* ------------ 이벤트 핸들러 함수 등록 ------------ */
    myPlayer.on('playing', playing);
    myPlayer.on('pause', pause);
    myPlayer.on('timeupdate', timeupdate);
    myPlayer.on('playbackratechange', playbackratechange)
    myPlayer.on('ended', ended)

  }, [])


  return (
    <div id="divVimeo">
      {/* 여기에 플레이어 생성됨 */}
    </div>
  )
}

export default React.memo(VimeoCT);
import React, { useState, useEffect } from "react";

//플레이어 constructor 임포트
import Player from '@vimeo/player'

//id 번호만 받아오면 됨.
const VimeoCT = ({ id = 479517196 }) => {

  useEffect(() => {
    //플레이어 옵션 설정
    const options = {
      id: id,
      width: 500, //플레이어 가로
      controls: true, //컨트롤러 표시 여부
      title: false, //영상 타이틀 출력
      byline: false, //영상 제작자 표시
      portrait: false, //vimeo 프로필 초싱화
    }

    //플레이어 생성
    const myPlayer = new Player('divVimeo', options)

    //지역변수 초기화
    let doneTime = 0; //누적시간
    let prevTime = 0; //기준시간
    let timeupdateInterval = 0; //업데이트 간격 조정변수

    /* ------------ 이벤트 처리 관련 함수 정의 ------------ */
    //누적시간, 기준시간 갱신 함수 
    const updateTimes = async () => {
      doneTime += (Date.now() - prevTime) * (await myPlayer.getPlaybackRate()); //현재까지 누적시간 저장
      prevTime = Date.now(); //기준시간 갱신
    }

    const playing = () => {
      prevTime = Date.now();   //기준시간 기록/갱신
      console.log("[playing] prevTime", prevTime);
    }

    const pause =async () => {
      doneTime += (Date.now() - prevTime) * (await myPlayer.getPlaybackRate());  //현재까지 누적시간 저장
      console.log("[pause] prevTime", prevTime);
    }

    const timeupdate = async () => {
      timeupdateInterval++;
      if (timeupdateInterval % 4 === 0) { //1초간격
				timeupdateInterval = 0;
        if (await myPlayer.getPaused() === false) {
          updateTimes()
          console.log("[timeupdate] doneTime초 누적해서 들었음.", doneTime / 1000);
        }
      }
    }

    const playbackratechange = async () => {
      if (await myPlayer.getPaused() === false) {
        updateTimes()
      }
    }

    const ended = async () => {
      updateTimes()
      console.log("[ended] doneTime초 누적해서 들었음.", doneTime / 1000);
    }

    /* ------------ 이벤트 핸들러 함수 등록 ------------ */
    myPlayer.on('playing', playing);
    myPlayer.on('pause', pause);
    myPlayer.on('timeupdate', timeupdate);
    myPlayer.on('playbackratechange', playbackratechange)
    myPlayer.on('ended', ended)

  }, [])


  return (
    <div id="divVimeo">
      {/* 여기에 플레이어 생성됨 */}
    </div>
  )
}

export default React.memo(VimeoCT);