video 태그
video 태그를 사용하면 HTML 페이지에 동영상을 추가할 수 있습니다.
이 태그를 통해 동영상을 제어할 수도 있습니다.
동영상 파일의 경로는
src 속성 또는 중첩된 source 태그를 통해 지정합니다.
동영상 재생을 제어하는 플레이어를 표시하려면
controls 속성을 추가해야 합니다.
이 속성이 없으면 아무것도 표시되지 않으며,
소리와 이미지도 재생되지 않습니다.
가끔은 사이트 자체에 동영상을 호스팅하는 것이
매우 편리하지 않을 수 있습니다 (예를 들어, 호스팅 공간이 제한된 경우).
이 경우 동영상을 YouTube에 업로드하고
iframe 태그를 사용하여 연결할 수 있습니다.
속성
| 속성 | 설명 |
|---|---|
src |
동영상 파일의 경로를 지정합니다.
하지만 이 용도로는 source 태그를 사용하는 것이 더 좋습니다
(이 경우 다양한 형식의 동영상을 지정할 수 있습니다).
|
preload |
웹사이트 페이지 로드와 동시에 동영상 파일을 로드하는 데 사용됩니다.
사용 가능한 값: none (파일을 로드하지 않음, 기본값),
metadata (재생 시간 등의 메타데이터만 로드),
auto (HTML 페이지 로드 시 동영상 전체를 로드).
|
autoplay |
페이지 로드 후 즉시 소리가 재생되며,
이때 preload 속성은 무시됩니다.
값 없는 속성입니다. |
controls |
동영상에 제어 패널을 추가합니다.
값 없는 속성입니다. 기본적으로 (속성이 없을 경우) 패널이 추가되지 않습니다. |
loop |
오디오 녹음을 "반복" 재생합니다:
재생이 끝나면 다시 처음부터 시작합니다.
값 없는 속성입니다. 기본적으로 (속성이 없을 경우) 녹음은 1번만 재생됩니다.
|
poster |
동영상을 사용할 수 없거나 재생되지 않을 때 표시될 이미지의 경로입니다.
poster 속성이 지정되지 않으면 브라우저는 동영상의 첫 번째 프레임을 표시하려고 시도합니다.
|
height |
height 속성은 비디오 클립 재생 영역의 높이를 지정합니다 (픽셀
또는 백분율).
동영상 자체는 지정된 높이에 맞게 크기가 늘어나거나 줄어들지만,
이때 종횡비는 변경되지 않습니다.
기본값: 동영상 매개변수에서 높이를 가져옵니다. 이 값을 사용할 수 없는 경우, height 속성의 값은
poster 속성의 이미지 높이와 동일한 것으로 간주됩니다.
poster도 지정되지 않은 경우 - 높이는
150 픽셀로 설정됩니다.
|
width |
width 속성은 비디오 클립 재생 영역의 너비를 지정합니다 (픽셀
또는 백분율).
동영상 자체는 지정된 너비에 맞게 크기가 늘어나거나 줄어들지만,
이때 종횡비는 변경되지 않습니다.
기본값: 동영상 매개변수에서 너비를 가져옵니다. 이 값을 사용할 수 없는 경우, width 속성의 값은
poster 속성의 이미지 너비와 동일한 것으로 간주됩니다.
poster도 지정되지 않은 경우 - 너비는
150 픽셀로 설정됩니다.
|
예제 . 사이트 페이지의 플레이어
페이지에 비디오 플레이어를 추가해 보겠습니다.
video 태그를 지원하지 않는 브라우저를 위해
특별한 메시지를 남겨둡니다:
<video src="moovie.mp4" controls>
귀하의 브라우저는 HTML5 video를 지원하지 않습니다.
</video>
예제 .
video 태그에
source 태그를 추가해 보겠습니다:
<video>
<source src="moovie.mp4" controls>
귀하의 브라우저는 HTML5 video를 지원하지 않습니다.
</video>
