HTMLVideoElement

HTMLMediaElement 인터페이스란?

공식 문서
오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해
HTMLElement에 메소드와 프로퍼티를 추가한 인터페이스

HTMLVideoElement 와 HTMLAudioElement 는 이 인터페이스를 상속

유용한 속성들

• HTMLMediaElement.currentTime
  현재 재생 시점을 초 단위로 표현한 double값. 이 값을 세팅하여 재생 시점을 변경할 수 있다.
• HTMLMediaElement.duration 읽기전용
  미디어의 전체 길이를 초 단위로 double 값으로 반환. 재생 가능한 미디어가 없을 경우 0을 반환.
• HTMLMediaElement.muted
  오디오 음소거 여부를 Boolean 값으로 반환합니다. 음소거라면 true 반대는 false 를 반환
• HTMLMediaElement.paused 읽기전용
  미디어 일시 정지 여부를 Boolean 값으로 반환
  
• HTMLMediaElement.defaultMuted
  Boolean 기본적으로 음소거 상태인지 표시하는 muted HTML 속성 값을 Boolean으로 반환
  
  

유용한 메소드들

• HTMLMediaElement.play()
  미디어 재생
• HTMLMediaElement.pause()
  미디어 재생 일시정지
  
  

유용한 이벤트들

• pause
  미디어 일시 정지를 요청하고 paused 상태로 진입하는 시점에 발생.
  일반적으로 HTMLMediaElement.pause() 메소드가 호출되는 시점.
  video.addEventListener("pause", handlePause);
• play
  HTMLMediaElement.play() 메소드 호출이나 autoplay 속성에 의해
  paused 프로퍼티가 true 에서 false로 전환되는 시점에 발생.
• loadedmetadata
  metadata가 로드 된 시점에 발생.
  video.addEventListener("loadedmetadata", handleLoadedMetadata);
  • metadata란? 비디오를 제외한 모든 것.
    비디오의 시간, 가로/세로 크기 등
• timeupdate
  currentTime 속성이 변경되는 시점에 발생
  video.addEventListener("timeupdate", handleTimeUpdate);
• ended
  미디어 재생 완료 여부를 Boolean 값으로 반환.
  
  

같이 살펴보면 좋은 내용

<input type="range">

공식 문서

비디오 시간(timeline)이나 볼륨 설정에 사용

사용 가능한 이벤트

• change
  드래그를 마쳤을 때 변경
• input
  실시간으로 변경
  
  

시간 formatting 트릭

const formatTime = (seconds) =>
  new Date(seconds * 1000).toISOString().substring(11, 19);

밀리초만큼을 인자로 받고,
포매팅된 시간을 문자열로 잘라옴

KeyboardEvent: code property

공식 문서
엔터 눌렀을 때 일시정지/재생과 같은 키보드를 통한 영상 컨트롤

window.addEventListener("keydown", (event) => {
  if (event.code == "Enter") {
    handlePlayClick();
  }
});

Fullscreen API

공식 문서
비디오 풀스크린

유용한 Instance methods

• Element.requestFullscreen();
  풀스크린
• document.exitFullscreen();
  풀스크린 해제

유용한 Instance properties

• document.fullscreenElement
  현재 풀스크린 모드로 보여지고 있는 element를 알려줌
  null을 반환하는 경우 documnet는 풀스크린 모드가 아니다.
  즉, 현재 풀스크린 모드인지 확인이 가능하다.