정의

<video>는 비디오나 영화를 재생시킨다.

속성

  • src: 재생할 비디오의 주소를 지정한다.
  • width: 요소의 너비를 지정한다. (value: pixels)
  • height: 요소의 높이를 지정한다. (value: pixels)
  • loop: 반복 재생을 지정한다. (value: loop)
  • poster: 사용자 에이전트가 비디오 데이터를 사용할 수 없는 경우 이미지 파일의 주소를 권장한다. (value: URL)
  • preload: 음악을 재생하기 전에 모두 불러올지 지정한다. (value: auto, metadata, none)
    none : 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음
    metadata : 사용자가 비디오를 필요로 하지 않을 것이지만, 기본정보(크기,첫프레임,오디오길이 등)는 가져온다.
    auto : 사용자가 비디오를 필요로 하고 미리 다운로드를 한다 (기본값)
  • autoplay: 자동 재생을 지정한다. (value: autoplay)
  • muted: 비디오의 오디오 출력을 음소거로 지정한다. (value: muted)
  • controls: 사용자 에이전트트의 기본 컨트롤러를 사용하도록 지정한다.

예제

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
 당신의 브라우저는 video태그를 지원하지 않습니다.
</video>

브라우저 지원

Browser MP4 WebM Ogg
Internet Explorer (9 ~) Yes No No
Chrome (4.0~) Yes Yes Yes
Firefox(3.5 ~) Yes Yes Yes
Safari (4.0 ~ ) Yes No No
Opera (10.5 ~) Yes Yes Yes

비디오 확장자 설명

종류 확장자 설명
비디오 mp4 고화질 영상을 지원해 많은 사이트에서 사용되고 있다. 라이센스가 있으므로 웹 용을 제외하면 유로로 사용해야 한다.
webm 화잘이 우수하고 무료로 제공되어 최근 많이 사용되고 있다.
ogg 화질은 다른 비디오 유형보다 떨어지지만 무료라는 장점 때문에 WebM 형식이 등장하기 전에 많이 사용되었다.

비디오 포멧 MIME Types

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

지원되는 브라우저마다 파일이 다른데 Youtube HTML5페이지에서는 HTML5 동영상 플레이어 파일이 지원되는 것을 보여준다.

아래 이미지는 크롬 브라우저로 접속한 화면이다.

아래 이미지는 인터넷 익스플로러11 버전으로 접속한 화면이다.

video.js 플러그인 이용하기

웹 브라우저마다 표시되는 <video>태그의 형태가 일관되지 않으므로 웹페이지를 디자인할 때 문제가 된다.
IE8이하에서는 video 태그가 동작하지 않기 때문에 이러한 문제를 쉽게 해결 할 수 있는 간단한 플러그인이 video.js 플러그인이다. 

<head>
  <link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type="video/mp4">
    <source src="MY_VIDEO.webm" type="video/webm">
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
</body>

플러그인을 사용하면 간단히 IE8에서도 작동이 되지민 플러그인을 많이 쓰는 것을 추천하지 않는다.
플러그인 쓰지 않고 간단히 할 수 있는 방법은 다음과 같다.

IE 조건부 주석 사용하기

<div class="video-wrap-ie8">
  <!--[if lte ie 8]>
  <iframe style="width: 1920px; height: 960px;" src="vimeo나 유투브 경로를 넣는다." frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
<![endif]-->
</div>
<div class="video-wrap">
  <!--[if gt ie 8]><!-->
  <video class="view player" autoplay="" loop="" muted="false">
    <source src="videofile.mp4" type="video/mp4">
    <source src="videofile.mp4" type="video/ogg">
  </video>
  <!--<![endif]-->
</div>

위의 코드처럼 하게 되면 ie8은 8포함 이하 버전에서는 iframe으로 나오고 익스9이상에서는 <video>가 나오게 된다.
단점은 iframe으로 할때 유투브나, 비메오, (본인서버)에 올려줘야 하는 단점이 있다.

IF 조건문

if조건문 사용에 모를 수 있는 분을 위해서 짧게 설명하겠다.

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="CSS 파일 위치">
<![endif]-->
  <!--[if lte IE 9]>
<style>CSS 내용</style>
<![endif]-->
  • gte : IE9 버전 이상
  • gt : IE9 버전 초과
  • lte : IE9 버전 이하
  • lt : IE9 버전 미만
  • IE8 버전만 적용

동영상 파일 변환

동영상 파일 변화는 웹 사이트 검색하면 나오는 곳도 있지만 프로그램 중에는 카카오인코더가 있다.
카카오인코더 캡쳐화면

마치며

단순히 비디오 태그만 사용한다면 if조건문을 사용하며 iframe과 video를 태그를 쓰는 것이 낫다고 보지만 비디오 태그를 디자인하여 customize를 해야한다면 video.js를 사용해도 괜찮을 듯 싶다.
video.js를 사용할 때는 ie8이하에서만 호출하면 해결될 듯 하다.