video.js 예제 및 옵션 > 개발

• 목록

• 페이스북 공유
• 트위터 공유

HTML5 의 video 태그를 컨트롤하는 자바스크립트 솔루션인 video.js
간단한 사용법을 기록해 놓는다.


1. 기본 사용법
[code]
<link href="https://vjs.zencdn.net/7.0.3/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.0.3/video.min.js"></script>

<video class="video-js" data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
[/code]

여기서 참고 몇가지
data-setup 을 지정해 주지 않으면, 제대로 동작하지 않는 듯 하다.
source 는 video 태그에 src 로 지정을 하면, 제대로 동작을 하지 않는 듯 하다.


2. 옵션

video.js 의 기본 화면에서 플레이 버튼이 왼쪽 상단에 가 있다.
이것을 중앙에 배치하려면, 클래스에 vjs-big-play-centered 를 지정해 주면 된다.

[code]
<video class="video-js vjs-big-play-centered" data-setup='{}'>
</video>
[/code]

player 의 크기를 지정하지 않으면, 기복적으로 영상 자체의 크기로 플레이어 창이 만들어진다.
가로 사이즈를 100% 로 플레이창을 만들고 싶으면, 클래스에 vjs-fluid 를 주면 된다.

[code]
<video class="video-js vjs-big-play-centered vjs-fluid" data-setup='{}'>
</video>
[/code]


3. 재생 시간 보이기

video.js 는 기본값으로 남은시간을 보여준다. 다른 요소들은 css 로 display:none; 되어 있다.
그래서, 진행시간/전체시간 의 형태의 데이타를 보이게 하려면, 해당 요소의 css 를 display 시켜주면 된다.
각각의 클래스명은 vjs-remaining-time (남은시간) , vjs-current-time (현재시간), vjs-time-devider (구분자,/), vjs-duration (전체시간) 이다.
그리고, vjs-time-control 클래스는 '현재시간 / 전체시간' 을 포함하고 있다. 

All timers exist on the player but by default the current-time, time-divider and the duration info are hidden with display: block;.
So the only thing we have to do is hide the remaining-time and show the time-control which includes the current-time, time-divider and the duration.

[code]
<style type="text/css">
    .video-js .vjs-time-control{display:block;}
    .video-js .vjs-remaining-time{display: none;}
</style>
[/code]





참고
https://videojs.com/
https://videojs.com/advanced/
https://stackoverflow.com/questions/20051332/videojs-centered-play-button
https://www.imls.gov/sites/all/libraries/videojs/docs/guides/setup.md
https://stackoverflow.com/questions/15324061/show-the-current-time-of-the-video-instead-of-the-remaining-time-on-videojs

추천0