HTML / video / 동영상 삽입하는 태그
video
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 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>
Related Posts
pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 한 줄로 나옵니다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...
noscript noscript 태그 안의 내용은 스크립트를 지원하는 않는 웹브라우저나 스크립트를 실행하지 않도록 설정한 웹브라우저에서만 출력됩니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Tag | noscript</title> </head> <body> <script> document.write( '<h1>Your browser supports JavaScript</h1>'); ...
HTML / del - 삭제되었음을 나타내는 태그, ins - 새로 추가되었음을 나타내는 태그
del, ins del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>My favorate color is <del>blue</del> <ins>red</ins>.</p> </body> </html> CSS / text-decoration / 선으로 ...
인용 인용임을 나타내는 태그에는 q와 blockquote가 있습니다. q는 문단 안에서 인용할 때 사용하는 인라인 요소이고, blockquote는 새로운 문단에서 인용하는 블록 요소입니다. 문법 <q cite="xxx">...</q> <blockquote cite="xxx">...</blockquote> 인용문의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택사항이고, 웹브라우저에서는 보이지 않습니다. 예제 1 q 요소의 기본 모양은 인용문구를 큰 따옴표로 감싸는 것입니다. <!doctype html> <html lang="ko"> <head> <meta ...
HTML / input / radio / 라디오 버튼 만들기
라디오 버튼 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다.(중복 선택이 가능하게 하려면 체크박스를 만드세요.) 아무것도 ...
HTML / input / checkbox / 체크박스 만들기
체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스입니다. 체크박스는 input 태그로 만듭니다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름입니다. value : 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.(라디오 버튼은 하나만 선택할 수 있습니다.) 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...
HTML / caption / 표(table)에 캡션 붙이는 태그
caption 표(table)에 캡션 붙일 때 caption 태그를 사용합니다. 기본 위치는 표 위 가운데입니다. 캡션 위치는 CSS의 caption-side로 정합니다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>
HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식
textarea textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. 문법 <textarea></textarea> 예제 col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { ...
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> TIP b 태그는 글자를 굵게 만듭니다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점입니다.
문법 <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"> ... </blockquote> 속성값(value)은 큰 따옴표로 감싸도 ...