video 태그
video 태그는 웹 페이지에 비디오를 재생하는 영역을 만듭니다.
예를 들어 아래와 같이 웹페이지에 비디오를 넣을 수 있습니다.
video 태그 사용법
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
비디오를 지원하지 않는 브라우저용 대체 텍스트입니다.
</video>
-
width와height: 비디오 플레이어의 크기를 지정 -
controls: 재생/일시정지 버튼 같은 비디오 컨트롤러를 표시 -
<source>: 비디오 파일의 경로와 파일 타입 지정
<video> 태그 사용 유의사항
-
파일 포맷: 웹에서 재생되는 비디오 파일 포맷이 모든 브라우저에서 동일하게 지원되지 않습니다. 따라서 여러 포맷의 동영상 파일을 준비해서 호환성을 높이는 것이 좋습니다. -
대체 텍스트: video 태그 안에 작성한 텍스트는 비디오가 지원되지 않는 브라우저에서 보여질 내용을 정의합니다. 이곳에 동영상 설명을 기재하는 것이 좋습니다. -
데이터 사용: 비디오 파일은 크기가 크기 때문에, 페이지 로딩 속도에 영향을 줄 수 있습니다. 따라서 꼭 필요한 곳에서만 사용하고 파일 크기를 가능한 작게 압축하는 것도 중요합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!