HTML / video / 동영상 삽입하는 태그
video
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.
문법
|
1 2 3 4 |
<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로 조절하는 것이 좋습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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라는 이미지와 재생 메뉴를 보여줍니다.
- 재생 버튼을 클릭하면 동영상을 재생합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |