동영상 삽입을 위한 HTML video 태그

Video 태그란?

<img> 태그가 이미지를 삽입하는 용도라면 <video> 태그는 동영상 콘텐츠를 추가하는 용도입니다. 

video는 전체 이름을 쓰는데 왜 이미지 태그는 <image>라고 하지 않고 <img>라고 하는지 잘 모르겠네요.

 

사용법

<video src="video.mp4" width="640" height="360" controls>
Your browser does not support the video tag.
</video>

• video 태그를 열고 src, width, height 등의 속성을 입력합니다
  • src : 비디오 파일이 있는 URL을 입력합니다
  • width : 재생할 비디오 영상의 너비를 정합니다
  • height : 재생할 비디오 영상의 높이를 정합니다
  • width, height를 입력하지 않으면 동영상 원본 크기로 재생됩니다
• controls 이 속성을 추가하면 유저가 비디오를 재상, 일시정지, 음량 조절 할 수 있는 버튼이 보입니다.

controls 외 비디오 태그가 가지고 있는 추가 속성을 알아볼께요

• autoplay : 이 속성을 추가하면 비디오가 자동으로 재생됩니다
• loop : 비디오가 반복으로 재생됩니다
• muted : 음소거 상태로 재생됩니다
• poster : 비디오가 재생되기 전 이미지를 지정할 수 있어요
• preload : 비디오가 로드될 때 어느 정도까지 미리 로드할지 정할 수 있어요

 

응용 사용법

<video src="video.mp4" width="640" height="360" controls autoplay loop muted poster="thumbnail.jpg" preload="metadata">
Your browser does not support the video tag.
</video>

다른건 다 학습하면서 이해를 했었는데 preload 뒤에 어떤 속성값들이 더 붙는지 모르겠더라구요.

그래서 추가로 알아보았습니다.

• none : 사용자가 재생하기 전까지는 미리 동영상을 다운로드하지 않습니다
• metadata : 동영상의 메타데이터 (크기, 길이, 코덱) 등 정보만 다운로드 합니다
• auto : 웹 페이지를 로딩할 때 비디오 파일을 함께 다운로드합니다 (auto가 기본값입니다)