프론트엔드 영역에서 web을 이루는 요소가 많지만 내가 잘 다뤄보지 못한 영역은 video 영역이였습니다.
그러나, video를 사용해서 만들어진 웹들은 굉장히 많고(특히, Netfilex 같은 스트리밍 서비스) web 에서 어떻게 다루는지 궁금하여 이 글을 작성하였습니다.

<video />

video 태그는 HTML5 부터 지원하는 요소입니다.
video 태그는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.
HTML5 이전에는 플러그인이 있는 브라우저에서만 비디오를 재생할 수 있었습니다. (어렸을때 Flash나 ActiveX로 영상보던게 기억이나네요...)

사용법

1. video 태그 하나만으로도 src에 비디오가 저장된 url을 입력하면 비디오를 재생할 수 있습니다.
<video autoplay controls loop muted poster="aaa" preload="bbb" src="xxx" />



2. video 태그 안에 source 태그를 이용하여 각 브라우저가 지원하는 포멧으로 비디오를 실행할 수 있습니다.
<video autoplay controls loop muted poster="aaa" preload="bbb">
  <source src="xxx" type="yyy"> // 선호하는 video 타입 순서대로
  <source src="xxx" type="yyy">
  <source src="xxx" type="yyy">
  해당 브라우저는 video 태그를 지원하지 않습니다. // 모든 타입의 비디오가 호환되지 않을때 렌더
</video>

video tag attribute

attribute	type	description
autoplay	boolean	동영상 자동으로 재생
loop	boolean	동영상을 반복 재생한다
src	string	동영상 주소
poster	string	동영상 재생 전에 보여줄 placeholder 이미지
muted	boolean	설정하면 오디오가 나오지 않는다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨
width	number	비디오 스테이지의 너비
height	number	비디오 스테이지의 높이
preload	none, auto, meta	페이지가 열리면 비디오를 미리 로드해 둔다. none - 프리로드를 사용하지 않음 auto - 페이지가 모두 열리면 비디오 프리로드 meta - 페이지가 모두 열리면 비디오 메타정보만 로드

Video Dom Event

많은 video 에 관련된 이벤트들이 있지만 유용하게 쓰이거나 제가 사용한 이벤트들을 소개해드립니다.
더 자세한 event 와 ref의 property 들을 살펴 보고싶으시다면 여기를 참고해주세요!

비디오 데이터가 로드를 시작하고 끝날때까지 이벤트의 순서는 아래와 같습니다.

1. loadstart : 비디오 데이터가 로드가 시작 되었을 때 발생합니다.

2. loadedmetadata : 메타데이터가 로드 되면 시작됩니다. 이제 미디어와 트랙의 길이와 크기를 알 수 있습니다.

   • 메타 데이터는 우리가 유용하게 사용할 수 있는 동영상의 재생시간 과 같은 것을 의미합니다..

3. loadeddata : 미디어의 현재 재생 위치에 있는 프레임이 로드 를 완료하면 시작됩니다.

   • 로드된 데이터가 재생에 있어서 충분하다고 보장하지 않기 때문에, loadeddata 이벤트가 발생한 시점에서 play() 메소드를 호출하면, 재생이 실패할 수도 있다는 것을 주의해야합니다.

4. canplay : 재생을 할 수 있는 정도의 충분한 데이터가 로드되었을 때, 미디어는 재생할 수 있다고 판단하고 이벤트를 호출합니다. 전체 재생이 아닌 현재 시점에서 재생을 할 수 있는지 없는지를 나타낸다.

5. canplaythrough : canplay 이벤트와 동일하지만, 차이점은 전체 미디어가 중단없이 재생할 수 있을 때 호출됩니다. canplay 이벤트가 전체 재생을 보장하지는 못하였다면, canplaythrough 는 중단없이 전체 재생을 보장하는 목적이다.

이 외에도 유용하게 썻던 이벤트들이 있습니다.

event name	description
ended	동영상이 끝났을때 실행
timeupdate	비디오의 재생 위치가 변경 될 때 실행

브라우저 환경에 따라 이벤트가 일어나는 순서들은 조금씩 차이가 있습니다.
더 자세한 이벤트에 이야기는 이 글에서 참고하시면 될 것 같습니다.

Video 포멧의 호환성

브라우저마다 video 태그에서 지원하는 video 포멧이 다릅니다.
파이어폭스와 오페라는 WebM과 OGV 파일형식을 지원합니다. 그리고 크롬은 MP4, WebM, OGV 의 모든 파일 형식을 지원합니다. 웹 문서에서 비디오 파일을 사용할 때 해당 브라우저에서 지원하는 비디오 파일 형식을 확인해야 합니다.

위에서 설명한 것처럼 video 태그에 source 태그를 이용해서 여러 포멧의 비디오들을 보여줄 수 있습니다.

Video atuoPlay

사파리와 크롬의 브라운저 엔진 자체의 정책에서 기본적으로 음소거를 진행하지 않으면,
비디오를 자동 재생(autoPlay) 제한이 있기에, 음소거 요소를 추가해 줘야 합니다.

요약

---

• 브라우저에서는 video를 다루기위해 video 태그를 쓴다.
• 각 브라우저마다 호환되는 비디오 포멧이 다를 수 있다.
• 비디오가 로드를 시작하고 데이터를 받아올때 일어나는 이벤트들은 다양하고 적절한 이벤트 시점에 접근할 수 있는 메서드들이 다르다.

• 참고 자료
  https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video
  https://m.blog.naver.com/skydoor2014/221667330746
  https://web.dev/i18n/ko/video-and-source-tags/
  https://www.w3schools.com/tags/ref_av_dom.asp
• 비디오/오디오 이벤트 관련
  https://medium.com/@nathan5x/event-lifecycle-of-html-video-element-part-1-f63373c981d3
  https://mygumi.tistory.com/356