HTML5, 웹 페이지에 비디오 넣기 - Video src

 

<video> 태그는 비디오 파일을 재생하기 위한 html5 규약의 태그입니다. 앞의 두 가지 미디어 태그인 이미지 태그 img, 사운드 태그인 audio에서도 그랬지만 항상 src가 미디어 속성 경로(비디오 파일의 위치)를 지정하기 전에 들어가는 데 src는 해당 미디어 속성의 경로를 정의(Sorce)하게 됩니다. 

비디오 태그의 기본 형태는 아래와 같은 모습을 취하게 됩니다.

 

비디오 태그와 관련된 속성들의 의미는 아래와 같습니다.

- controls : 재생, 일시정지, 볼륨, 재시작 등의 버튼이 있는 비디오 컨트롤러를 불러옵니다.

- autoplay : 자동으로 비디오를 재생합니다. 비디오 데이터의 로딩이 완료되지 않았더라도 재생할 준비가 되면 재생을 시작합니다.

- loop : 동영상의 재생이 모두 끝나면 동영상의 처음으로 돌아가 자동으로 비디오를 반복 재생합니다.

- poster : 비디오가 로딩중일 때 화면에 보이게 표시하는 대표 이미지를 지정합니다. poster 태그의 형식은 <video poster="이미지 파일의 경로">와 같은 형식을 취하게 됩니다. 지정이 없으면 첫 번째 프레임의 이미지를 사용합니다.

- 비디오의 크기 지정 : 가로(width)와 세로(height)의 픽셀값으로 비디오의 크기를 지정합니다.

- preload : 비디오의 소유자가 웹브라우저에게 비디오 재생에 관하여 어떻게 해야 하는 것이 좋을지를 알려주는 역할을 합니다. none(비디오가 캐시 되지 않게 합니다), metadata(비디오가 캐시 되지 않더라도 비디오의 길이와 같은 메타 데이터는 미리 로드하는 것이 좋다는 의미입니다), auto(사용자가 재생하지 않더라도 전체 데이터를 다운로드합니다) 값을 가지게 됩니다.

 

예제 페이지를 만들기 위해 짧은 동영상 파일을 업로드 해보겠습니다.

 

video.mp4

1.86MB

 

 

 

업로드를 완료한 다음 위의 파일을 우클릭하여 링크 주소를 복사한 뒤 비디오 경로에 넣어서 소스코드를 아래와 같이 만듭니다.

 

<video src="https://blog.kakaocdn.net/dn/LTyNQ/
btqGtnA9vZi/
UAk9kxQpS8xz8TkPk2BdW0/tfile.mp4" 
controls 
width="300px" />

위의 코드에서 자동 재생과 반복을 방지하기 위해 autoplay와 loop를 제거하였습니다. 또한, 크기에 있어서는 가로 크기만을 지정하였는데 동영상 플레이어에서는 지정된 가로 또는 세로의 수치 하나만 있어도 이를 기반으로 적절한 나머지 크기를 자동으로 만들게 됩니다.

 

 

위에서 보는 바와 같이 대표 이미지의 경우에는 poster 속성을 사용하지 않았으므로 첫 번째 프레임을 자동으로 대표 이미지로 사용하고 있는 것이 보입니다.