[TS 과제 챌린지] Custom Video Player - 트러블슈팅

HTML5 의 비디오 이벤트는 Media Event를 따르게 됩니다

• 비디오 전체 길이는 duration 속성을 이용하여 가져 올 수 있습니다 그런데 비디오 data에 대한 로딩이 끝나지 않은 상태에서 duration값을 호출하면 NaN이 나올 수 있는데, 이땐 비디오 load가 끝난 시점에 duration값을 호출해야 합니다

  // 비디오 태그
  const video = document.getElementById('video') as HTMLVideoElement;
  let duration: number = 0;
  
                     //혹은 'loadedmetadata'
  video.addEventListener('loadeddata', () => { duration = video.duration});

• currentTime은 비디오 재생의 현재 위치를 반환합니다 그리고 이 값을 임의로 설정할 경우, 비디오는 해당 위치로 이동합니다. 그러므로 이를 이용해서 다양한 작업을 할 수 있습니다
  
  
  • 프로그래스 바가 존재할 경우, 프로그래스 바를 움직여서 동영상의 재생시점을 변경하는 함수

    프로그래스 바는 .value프로퍼티로 접근할 수 있으며
    백분위로 표시가 되며, 문자열형태입니다

    // 비디오 태그
    const video = document.getElementById('video') as HTMLVideoElement;
    
    video.currentTime = (Number(progressBar.value) * video.duration) / 100;

  • 동영상 진행에 따른 프로그래스바를 이동하는 함수입니다

    // 비디오 태그
    const video = document.getElementById('video') as HTMLVideoElement;
    
    const current: string = String((video.currentTime / video.duration) * 100);
    
    progressBar.value = current;

  • 만약 비디오를 정지하는 기능을 만드려 한다면
    시간을 0으로 설정 + 일시정지를 해주면 됩니다
    

        // 비디오 태그
        const video = document.getElementById('video') as HTMLVideoElement;
        
        video.pause();
        video.currentTime = 0;

---

줄바꿈 문자열도 노드에 포함 됩니다

<button class="btn" id="play">
		<i class="fa fa-play fa-2x"></i>
</button>

i태그에 접근하려 할 때 button 태그와 i 태그 사이에 줄바꿈이 존재합니다
여기서 , 줄바꿈도 하나의 Node로 취급하게 됩니다

• 그렇기 때문에 button태그에서 firstChild로만 접근하면 #text 요소가 나오게 됩니다

  const playBtn = document.getElementById('play') as HTMLButtonElement;
  
  const i = playBtn.firstChild? as HTMLElement; //#text

• 그러므로 줄바꿈인 #text요소의 다음 요소로 접근을 해야 합니다

  const playBtn = document.getElementById('play') as HTMLButtonElement;
  
  const i = playBtn.firstChild?.nextSibling as HTMLElement; // i 태그