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>