           start = parseFloat($("#jp-"+first).data("start_timecode"))
           stop = parseFloat($("#jp-"+last).data("end_timecode"))
 
-          @$(".js-jplayer").jPlayer("play", start)
+          $node.find(".js-jplayer").jPlayer("play", start)
 
 
   componentWillUnmount: ->
-    @$(".jp-jplayer").jPlayer('destroy')
+    $(@getDOMNode()).find(".jp-jplayer").jPlayer('destroy')
 
 
   createTextBox: =>

          <a className="ui-slider-handle ui-state-default ui-corner-all" href="#" style={{left: '40%'}}></a>
          <a className="ui-slider-handle ui-state-default ui-corner-all" href="#" style={{left: '80%'}}></a>
      </div>
    </span>`


    console.log(mediaObj)

    $playerNode = $node.find(".jp-jplayer")
    $playerNode.jPlayer
      solution: "flash, html"
      ready: ->
        $playerNode.jPlayer "setMedia",
          rtmpv: path + mov
          m4v: path+mov
          poster: "assets/rglossa/speech/_6.6-%27T%27_ligo.skev.graa.jpg"
        $playerNode.jPlayer( "play", start)

      timeupdate: (event) =>
        ct = event.jPlayer.status.currentTime
        if ct > stop
          $playerNode = $node.find(".jp-jplayer")
          $playerNode.jPlayer("play", start)
          $playerNode.jPlayer( "pause" )
        else if ct > @textBox.currentEndTime
          @textBox.update(ct)

