본문으로 건너뛰기
실습하기

video 태그

video 태그는 웹 페이지에 비디오를 재생하는 영역을 만듭니다.

예를 들어 아래와 같이 웹페이지에 비디오를 넣을 때 video 태그를 사용할 수 있습니다.

video 태그 사용법
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  사용하시는 브라우저가 비디오를 지원하지 않습니다.
</video>

위 코드는 movie.mp4라는 비디오 파일을 재생하는 비디오 플레이어를 만듭니다.

코드의 주요 요소는 다음과 같습니다.

  • width와 height: 비디오 플레이어의 크기를 지정

  • controls: 재생/일시정지 버튼 같은 비디오 컨트롤러를 표시

  • <source>: 비디오 파일의 경로와 파일 타입 지정


<video> 태그 사용 시각 유의사항​

  1. 파일 포맷 : 웹에서 재생되는 비디오 파일 포맷이 모든 브라우저에서 동일하게 지원되지 않습니다. 따라서 여러 포맷의 동영상 파일을 준비해서 호환성을 높이는 것이 좋습니다.

  2. 대체 텍스트 : video 태그 안에 작성한 텍스트는 비디오가 지원되지 않는 브라우저에서 보여질 내용을 정의합니다. 이곳에 동영상 설명을 기재하는 것이 좋습니다.

  3. 비디오 파일 용량 고려하기 : 비디오 파일은 크기가 크기 때문에, 페이지 로딩 속도에 영향을 줄 수 있습니다. 따라서 꼭 필요한 곳에서만 사용하고 파일 크기를 가능한 작게 압축하는 것도 중요합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!