       when 'image'
         <img className="subject" src={src} style={SUBJECT_STYLE} onLoad={@handleLoad} />
       when 'video'
-        <video ref="videoPlayer" src={src} type={"#{type}/#{format}"}>
+        <video ref="videoPlayer" src={src} type={"#{type}/#{format}"} onCanPlayThrough={@handleLoad} onEnded={@endVideo} onTimeUpdate={@updateScrubber}>
           Your browser does not support the video format. Please upgrade your browser.
         </video>
 

    </div>

  playVideo: (playing) ->
    player = @refs.videoPlayer?.getDOMNode()
    return unless player?
    @setState {playing}
    if playing
      player.play()
    else
      player.pause()
      time = player.currentTime
      @setState {time}
  
  setPlayRate: (e) ->
    playbackRate = parseFloat e.currentTarget.value
    player = @refs.videoPlayer?.getDOMNode()
    time = player?.currentTime
    @setState {time, playbackRate}
  
  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
    @refs.videoPlayer?.removeEventListener 'canplaythrough', @handleLoad
    @props.onLoad? arguments...

    time: 0
    playbackRate: 1
  
  componentDidUpdate: ->
    @refs.videoPlayer?.playbackRate = @state.playbackRate

  render: ->
    {type, format, src} = getSubjectLocation @props.subject, @state.frame
