CODING FACTORY

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>
HTML

HTML

최근 글