개념

• 비디오를 웹 브라우저에서 직접 재생할 수 있게 해주는 요소이다.

특징

• 자동재생, 반복재생, 음소거, 사전로딩 등 지원
• 비디오 로드 전 표시할 썸네일 이미지 설정 가능

주의사항

• 대부분의 브라우저에서 자동재생을 제한함
• width/height를 미리 설정하지 않으면 로딩 중 페이지 레이아웃이 변경될 수 있음 (video에 크기 정보가 없으면 브라우저는 일단 0x0 크기로 공간을 할당하고, 나중에 비디오 파일이 로드되면 실제 크기 공간을 차지하게 된다. 사용자 경험이 좋지 않고, 레이아웃을 다시 계산해야 해서 성능도 낮아짐)
• 청각/시각 장애인을 위한 대체 텍스트 제공이 필요

실무

• 외부 플랫폼 영상은 iframe으로, 자체 서버의 비디오는 video로 구분해서 사용한다.

예시

<video width="640" height="360" controls>
  <!-- 여러 포맷 제공으로 브라우저 호환성 확보 -->
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <!-- 브라우저가 video 태그를 지원하지 않는 경우 표시 -->
  브라우저가 비디오를 지원하지 않습니다.
</video>