video

1 개요
2 문법
3 예제 1
4 예제 2

개요

video는 HTML 문서에 동영상을 삽입하는 태그입니다.
HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.

문법

<video autoplay controls loop muted poster="aaa" preload="bbb">
  <source src="xxx" type="yyy">
  zzz
</video>

autoplay : 동영상을 자동으로 재생합니다.
controls : 재생, 정지 등 조작 메뉴를 보여줍니다.
loop : 동영상을 반복 재생합니다.
poster : 동영상 재생 전에 보여줄 이미지입니다.
preload : 페이지를 열 때 무엇을 로드할지 정합니다.
- auto : 동영상, 메타데이타 모두 로드합니다.
- metadata : 메타데이타만 로드합니다.
- none : 로드하지 않습니다.
source
- src : 동영상 위치를 입력합니다. 웹브라우저가 가장 많이 지원하는 형식은 MP4입니다.
- type : 동영상 타입을 알려줍니다. 만약 MP4 파일이라면 video/mp4라고 적습니다.
zzz : 웹브라우저가 video 태그를 지원하지 않을 때 출력될 텍스트입니다.

상충되거나 혼자서는 작동하지 않는 속성이 있습니다. 예를 들어 autoplay로 정하면 preload는 무시됩니다. 크롬 등 일부 웹브라우저에서는 muted와 autoplay를 같이 사용해야 자동 시작이 작동합니다.

예제 1

Clouds.mp4라는 동영상을 HTML 문서에 삽입합니다.(테스용 동영상은 https://pixabay.com/videos/에서 구할 수 있다.)
페이지가 로드되면 동영상이 자동 재생되고, 반복하여 재생됩니다.
재생, 정지 등 조작 메뉴가 보이지 않습니다.
IE 8 등 video 태그를 지원하지 않는 웹브라우저에서는 'Your browser does not support the video tag.'를 진하게 출력합니다.
크기, 배치 등은 CSS로 조절하는 것이 좋습니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      video { max-width: 80%; display: block; margin: 20px auto; }
    </style>
  </head>
  <body>
    <video muted autoplay loop>
      <source src="videos/Clouds.mp4" type="video/mp4">
      <strong>Your browser does not support the video tag.</strong>
    </video>
  </body>
</html>

예제 2

페이지가 로드되면 Clouds.png라는 이미지와 재생 메뉴를 보여줍니다.
재생 버튼을 클릭하면 동영상을 재생합니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      video { max-width: 80%; display: block; margin: 20px auto; }
    </style>
  </head>
  <body>
    <video controls poster="videos/Clouds.png">
      <source src="videos/Clouds.mp4" type="video/mp4">
      <strong>Your browser does not support the video tag.</strong>
    </video>
  </body>
</html>

HTML / Reference / label

label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.

HTML / Reference / caption

caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.

HTML / Reference / input type="range"

type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.

HTML / Reference / del, ins

del과 ins 태그는 HTML에서 텍스트의 수정 이력을 표현하는 데 사용됩니다. del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.

HTML / Reference / figure, figcaption

figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.

HTML / Reference / input type="hidden"

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.

HTML / Reference / abbr

abbr은 약자(abbreviation)임을 나타냅니다. title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다.

HTML / Reference / q

q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.

HTML / Reference / input type="number"

type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 숫자 범위, 값의 증감 단위 등을 설정할 수 있는 다양한 속성을 제공합니다. 이 입력 필드는 나이, 수량, 가격 등의 숫자 데이터를 입력받을 때 유용합니다.

HTML / Reference / noscript

noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.