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 / input type="time"

type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / abbr

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

HTML / Reference / address

address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.

HTML / Reference / noscript

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

HTML / Reference / em, strong

em 태그는 주로 말투나 감정적인 강조 또는 문장의 맥락에서 중요한 부분을 나타낼 때 사용합니다. strong 태그는 중요성, 경고 또는 텍스트에서 매우 중요한 정보를 나타낼 때 사용됩니다.

HTML / Reference / input type="number"

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

HTML / Reference / video

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

HTML / Reference / figure, figcaption

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

HTML / Reference / input type="checkbox"

checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.

HTML / Reference / pre

pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.