동영상 삽입하는 태그

HTML
Created 2020-03-01 Last Modified 2024-04-03

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

HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress progress는 진행 정도 나타내는 바를 만드는 태그이다. HTML5에서 추가되었다. 주요 속성은 max, value이다. max를 전체로 보았을 때 value에 해당하는 정도를 나타낸다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타낸다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타낸다. 웹브라우저에 따라, 웹브라우저의 버전에 따라 표현 방식이 다르다. <!doctype html> <html lang="ko"> <head> <meta ...

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만든다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋다. 문단 문단(paragraph)은 p 태그로 만든다. 문단과 문단 사이는 간격이 크다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용한다. 예제 1 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다르다. h4와 p는 글자 크기가 같다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading ...

HTML / input / hidden / 입력하지 않은 값을 넘기는 숨겨진 양식

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용한다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있다. 사용자가 접속한 IP, 로그인한 상태에서의 계정 정보, 게시물의 답글인 경우 게시물의 ID 등을 예로 들 수 있다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘긴다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정한다. 다음은 ...

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

em, strong em 태그는 강조하는 텍스트에 사용한다. 기본 모양은 기울임꼴이다. strong 태그는 중요한 텍스트에 사용한다. 기본 모양은 굵은 글자이다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> b 태그는 글자를 굵게 만든다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점이다.

HTML / input / range / 범위 내의 숫자를 선택하게 하는 양식

개요 type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식이다. 슬라이드로 값을 선택한다. 문법 <input type="range" min="x" max="x" step="x" value="x"> min : 최솟값으로, 기본값은 0이다. max : 최댓값으로, 기본값은 100이다. step : 숫자들 사이의 간격으로, 기본값은 1이다. value : 초기값으로, min과 max의 평균이다. 예제 Submit을 클릭하면 URL에서 값을 확인할 수 있다. 아래 상태 그대로 전송하면 URL 뒤에 ...

HTML / address - 문서의 소유자, 작성자의 연락처를 나타내는 태그

address address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit ...

HTML / 문법

기본 문법 가장 기본적인 문법은 다음과 같다. <tagname>Contents</tagname> 위 모든 걸 요소(element)라고 한다. <tagname>을 시작 태그, </tagname>을 종료 태그, 둘을 합쳐 태그(tag)라고 한다. Contents는 내용이다. 예를 들어 <p>Lorem</p> 는 p 요소라 하고, 시작 태그는 <p>, 종료 태그는 </p>, 내용은 Lorem이다. 속성 태그는 속성(attribute)을 가질 수 있다. <tagname attribute="value">Contents</tagname> 예를 들어 blockquote에 id 속성(attribute)을 추가하고 값(value)을 abc로 정하고 싶으면 다음과 같이 한다. <blockquote id="abc"> ...

HTML / placeholder / 양식에 안내 문구 추가하기

input 태그에 value를 이용해서 기본값을 만들 수 있다. 이 상태에서 버튼을 클릭하면 기본값이 전송된다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...

HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기

표 만들 때 사용하는 태그 표는 table 태그로 만든다. 행은 tr 태그로 만든다. 열의 제목이 들어가는 셀은 th 태그로 만든다. 내용이 들어가는 셀은 td 태그로 만든다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분 지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용한다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용한다. 표 제목은 caption 태그로 ...

HTML / video / 동영상 삽입하는 태그

개요 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 : 동영상 재생 전에 ...