설치 및 셋업
git clone https://github.com/mozilla/popcorn-js.git
cd popcorn-js
make
cp dist/popcorn-complete.js <project>/app/assets/javascripts/
vi application.js

...
//= require popcorn-complete
기본 활용
0
Loading...
vi Markup

<video class="video_player" id='video_id' controls>
  <source src="/samples/big-buck-bunny_trailer.webm">
  <source src="/samples/big-buck-bunny_trailer.mov">
  <source src="/samples/big-buck-bunny_trailer.ogv">
  <source src="/samples/big-buck-bunny_trailer.mp4">
</video>

<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

popcorn = Popcorn( "#video_id" )

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

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

$('button.stop').on 'click', =>
  popcorn.pause()
  popcorn.currentTime(0)

popcorn.on 'timeupdate', () =>
  $("span.timeinfo").text(popcorn.currentTime())

popcorn.on 'canplay', () =>
  $('span.status').text('Loaded')

popcorn.on 'playing', () =>
  $('span.status').text('Playing')

popcorn.on 'pause', () =>
  $('span.status').text('Paused')

popcorn.on 'ended', () =>
  $('span.status').text('Ended')
표준 래퍼(Wrapper) 사용하기
0
Loading...
vi Markup

<div class="video_player" id='wrapper_id' data-url="/samples/big-buck-bunny_trailer.webm"></div>
...
vi Coffeescript

wrapper = Popcorn.HTMLVideoElement("#wrapper_id")
wrapper.src = $("#wrapper_id").data('url')
popcorn = new Popcorn(wrapper)
...
유투브 래퍼 사용하기
0
Loading...
vi Markup

<div class="video_player" id='youtube_id' data-url="http://www.youtube.com/embed/I3dezFzsNss?rel=0&controls=1&disablekb=1&fs=0"></div>
...
vi Coffeescript

wrapper = Popcorn.HTMLYouTubeVideoElement("#youtube_id")
wrapper.src = $("#youtube_id").data('url')
popcorn = new Popcorn(wrapper)
...