동영상 삽입하는 태그

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 / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

순서 있는 목록 - ol 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Ordered List</h1> <ol> ...

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

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

HTML / a / 링크(link) 만들기

링크(link)는 <a> 태그로 만든다. 링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있다. 기본 문법 <a href="xxx">Label</a> href 속성의 값에는 웹페이지, 이미지, 동영상, 파일 등의 주소를 넣는다. 웹페이지로 이동하거나, 동영상 플레이어가 실행되거나, 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리된다. <a href="">Label</a>처럼 href 속성에 값이 없으면, 현재 페이지로 이동하는 링크가 만들어진다. 주요 속성 a 태그에 추가할 ...

HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

figure, figcaption figure는 사진, 이미지, 다이어그램 등을 감싸는 테그이다. figcaption은 figure 요소에 캡션을 만든다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킨다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | figcaption</title> </head> <body> <p>Aenean nec mollis nulla. Phasellus ...

HTML / img / 이미지 삽입하는 태그

img img는 HTML 문서에 이미지를 삽입하는 태그이다. 주요 속성은 다음과 같다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나온다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 ...

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

HTML / pre / 입력한 그대로 출력하는 태그

pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식한다. 예를 들어 다음 문서의 내용은 한 줄로 나온다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...

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 / input / checkbox / 체크박스 만들기

체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스이다. 체크박스는 input 태그로 만든다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름이다. value : 전달될 값이다. checked : 선택된 상태로 만든다. 예제 1 - 기본 Blue 또는 Red를 선택한다. 둘 다 선택할 수 있다.(라디오 버튼은 하나만 선택할 수 있다.) 아무것도 선택되지 않은 상태에서 시작한다. <!doctype html> <html lang="ko"> ...