셋업
cd vendor/assets; npm install video.js
위 결과로 vendor/assets/node_modules/video.js/ 디렉토리 안에 video.js 5.0.x 버전이 설치된다.
vi application.js

# app/assets/javascripts/application.js
...
//= require video.js/dist/video.js
vi application.css.scss

// app/assets/stylesheets/application.css.scss
...
@import "video.js/src/css/video-js";
기본 사용법
0
Loading...
vi Markup

<div class="embed-responsive embed-responsive-16by9">
  <video id="video_id" class="embed-responsive-item video-js vjs-default-skin vjs-big-play-centered">
    <source src="/samples/big-buck-bunny_trailer.webm" type='video/webm'>
    <source src="/samples/big-buck-bunny_trailer.mov" type="video/mp4">
    <source src="/samples/big-buck-bunny_trailer.ogv" type='video/ogg'>
    <source src="/samples/big-buck-bunny_trailer.mp4" type='video/mp4'>
  </video>
</div>

<div>
  <span class='timeinfo'>0</span>
  <span class='status'>Loading...</span>

  <button class='play'>Play</button>
  <button class='pause'>Pause</button>
  <button class='stop'>Stop</button>
</div>
vi Coffeescript

player = videojs 'video_id',
  controls: true
  preload: "auto"
  width: "100%"
  height: "100%"
  poster: ""

player.ready ->
  # console.log @currentType()
  @on 'timeupdate', () ->
    t = Math.floor(@currentTime() * 100) / 100;
    $('span.timeinfo').text(t)

  @on 'canplay', () ->
    $('span.status').text('Loaded')

  @on 'playing', () ->
    $('span.status').text('Playing')

  @on 'pause', () ->
    $('span.status').text('Paused')

  @on 'ended', () ->
    $('span.status').text('Ended')
    @load()

  $('button.play').on 'click', =>
    @play()

  $('button.pause').on 'click', =>
    @pause()

  $('button.stop').on 'click', =>
    @pause()
    @currentTime(0)
유튜브(Youtube) 플러그인
0
Loading...
유튜브를 실행하기 위해서는 videojs-youtube라는 별도의 플러그인이 필요하다. 현재(2015.10) Master 브랜치는 video.js 5.0과 호환되지 않으므로 다음과 같은 절차가 필요하다. cd vendor/assets/node_modules
git clone https://github.com/eXon/videojs-youtube.git
cd videojs-youtube
git branch vjs5 origin/vjs5
git checkout vjs5
아쉽게도 vjs5 브랜치도 오류가 존재하기 때문에 몽키 패치가 필요하다. src/Youtube.js 에서 라인 27의 videojs.extendsvideojs.extend로 변경하고 빌드를 한다.
npm run build
위 빌드의 결과로 videojs-youtube/dist/ 아래에 Youtube.js 파일이 생성된다.
vi application.js

# app/assets/javascripts/application.js
...
//= require video.js/dist/video.js
//= require videojs-youtube/dist/Youtube.js
vi Markup

<div class="embed-responsive embed-responsive-16by9">
  <video id="video_id" class="embed-responsive-item video-js vjs-default-skin vjs-big-play-centered">
    <source src="http://www.youtube.com/embed/I3dezFzsNss" type="video/youtube">
  </video>
</div>
vi Coffeescript

player = videojs 'video_id',
  controls: true # or false
  preload: "auto"
  width: "100%"
  height: "100%"
  poster: ""
  techOrder: ["youtube"]
  youtube:
    ytControls: 2
    iv_load_policy: 1
    showinfo: 1
    cc_load_policy: 1

player.ready ->
  ...
HLS(Http Live Stream)
0
Loading...
cd vendor/assets/node_modules
git clone https://github.com/videojs/videojs-contrib-media-sources.git
cd videojs-contrib-media-sources
git branch mse-mp2t-polyfill origin/mse-mp2t-polyfill
git checkout mse-mp2t-polyfill
cd vendor/assets/node_modules
git clone https://github.com/videojs/videojs-contrib-hls.git
cd videojs-contrib-hls
git branch development origin/development
git checkout development
npm install
vi application.js

# app/assets/javascripts/application.js
...
//= require video.js/dist/video.js
//= require videojs-youtube/dist/Youtube.js
//= require videojs-contrib-media-sources/src/videojs-media-sources.js
//= require videojs-contrib-hls/dist/videojs.hls.js
vi Markup

<div class="embed-responsive embed-responsive-16by9">
  <video id="video_id" class="embed-responsive-item video-js vjs-default-skin vjs-big-play-centered">
    <source src="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8" type="application/x-mpegURL">
  </video>
</div>
vi Coffeescript

player = videojs 'video_id',
  controls: true
  withCredentials: true

player.ready ->
  ...