video.js 플러그인을 알아봅시다.

video.js 플러그인을 알아봅시다.

video.js는 자바스크립트 라이브러리로서 video태그를 사용해서 손쉽게 사용할 수 있으면서도 멋진 UI로 구현이 되는 플러그인입니다.

브라우저마다 표시되는 video 태그가 일관되지 않아서 어려움이 있습니다.

또 ie8에서는 video태그가 동작하지 않습니다.

이러한 문제를 간단히 해결하는 플러그인이 바로 video.js입니다.

다음은 video.js 홈페이지입니다.

http://videojs.com/

사용하는 방법은 아주 간단합니다.

html페이지에서 </head>상단에

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

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

를 넣어줍니다.

다운로드 받아서 로컬경로로 해 주어도 됩니다.

그리고 body태그 사이에

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"

      poster="http://video-js.zencoder.com/oceans-clip.png"

      data-setup="{}">

    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />

    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />

    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />

    <track kind="captions" src="captions.vtt" srclang="en" label="English" />

  </video>

이렇게 태그를 넣어주면 됩니다.

이것은 태그빌더입니다.

환경을 웹상에서 생성해 주면 쉽게 태그가 생성됩니다.

친절하기도 하셔라.

여기서 생성하여 코드만 복사해서 붙여넣으면 됩니다.

http://videojs.com/tag-builder/