       player.play()
     else
       player.pause()
+      time = player.currentTime
+      @setState {time}
+  
+  seekVideo: (e) ->
+    player = @refs.videoPlayer?.getDOMNode()
+    scrubber = @refs.videoScrubber?.getDOMNode()
+    pos = (e.pageX  - (scrubber.offsetLeft + scrubber.offsetParent.offsetLeft)) / scrubber.offsetWidth
+    time = pos * player.duration
+    @setState {time}
+  
+  endVideo: (e) ->
+    player = @refs.videoPlayer?.getDOMNode()
+    playing = false
+    time = 0
+    @setState {playing, time}
+  
+  updateScrubber: (e) ->
+    player = @refs.videoPlayer?.getDOMNode()
+    scrubber = @refs.videoScrubber?.getDOMNode()
+    scrubber.setAttribute 'max', player.duration unless scrubber.getAttribute 'max'
+    scrubber.value = player.currentTime
 
   handleLoad: (e) ->
     @setState loading: false

      </div>

      <div className="subject-tools">
        <span>{tools}</span>
        {if @props.subject?.locations.length >= 2
          <span>
            <span className="subject-frame-pips">

              </button>}
          </span>
      when 'video'
        <span>
          <span className="subject-frame-play-controls">
            {if @state.playing
              <button type="button" className="secret-button" aria-label="Pause" onClick={@playVideo.bind this, false}>
                <i className="fa fa-pause fa-fw"></i>
              </button>
            else
              <button type="button" className="secret-button" aria-label="Play" onClick={@playVideo.bind this, true}>
                <i className="fa fa-play fa-fw"></i>
              </button>}
          </span>
          <progress ref="videoScrubber" value="0" min="0" value={@state.time} style={width: '80%'} onClick={@seekVideo}>
          </progress>
        </span>

    <div className="subject-viewer" style={ROOT_STYLE if @props.defaultStyle}>
