[기술공유] week4

Week4 기술공유

Custom Video Player by KKambi

• 이벤트를 핸들링하는 것이 핵심
• HTML5에는 다양한 오디오/비디오 이벤트들이 존재함 참고
• 이를 React component의 state와 결합해서 구현하면 된다!
• KKambi의 경우 가 아닌 React-player를 사용해서 구현

탐색바 구현하기

let seeking = false; // seeking slider를 움직이는 중인지?
const toggleSeeking = () => {
  seeking = !seeking;
};

const Player = ({ match }) => {
  const [duration, setDuration] = useState(0); // 영상의 총 길이
  const [playedSeconds, setPlayedSeconds] = useState(0); // playedSeconds는 0 ~ duration 사이의 값
  const [loadedSeconds, setLoadedSeconds] = useState(0); // loadedSeconds는 0 ~ duration 사이의 값

  // Seeking Slider
  const handleSeekSliderMouseDown = () => {
    toggleSeeking();  // seeking 변수를 두어, 비디오 자연재생에 의한 탐색바 이동에 lock을 거는 방식
  };

  const handleSeekSliderChange = e => {
    setPlayedSeconds(e.target.value);
  };

  const handleSeekSliderMouseUp = e => {
    player.current.seekTo(e.target.value);
    toggleSeeking();
  };

  return (
      <input
        type="range"
        min={0}
        max={duration}
        step="any"
        value={playedSeconds}
        onMouseDown={handleSeekSliderMouseDown}
        onChange={handleSeekSliderChange}
        onMouseUp={handleSeekSliderMouseUp}
      />
  )

• playedSeconds/loadedSeconds는 0 ~ 1 사이의 값으로 설정하여 연산해도 된다.
• 이런 방식처럼 onDuration / onProgress 등의 다양한 비디오 이벤트들을 핸들링해주면 된다.

전체화면 버튼 구현하기

• 원리는 간단하지만, 브라우저에 따라 서로 다른 이름의 메소드를 호출해야 한다.
• 풀스크린을 해달라는 request를 브라우저에 따라 분기하여 호출해야 하므로 귀찮다.
• 라이브러리를 쓰면 편하다! screenfull 패키지

  // Fullscreen Event Handler
  const handleClickFullscreen = () => {
    if (screenfull.isEnabled) {
      screenfull.request(player.current.getInternalPlayer());
    }
  };