HTML5 video preview

app.rb

require 'sinatra'
require 'slim'
require 'coffee_script'

get '/' do
  slim :new
end

__END__
@@new
doctype html
html
  head
  body
    form
      p
        input type='file' accept='video/*'
    .preview
    
  coffee:
  
    document.addEventListener 'DOMContentLoaded', ->
      
      input = document.querySelector 'input'
      preview = document.querySelector '.preview'
      
      input.addEventListener 'change', (e) ->
      
        file = e.target.files[0]
        
        URL = window.webkitURL or window.URL
        url = URL.createObjectURL file
        
        video = document.createElement 'video'
        video.addEventListener 'seeked', (->

          canvas = document.createElement 'canvas'
          canvas.width = 320
          canvas.height = 240
          context = canvas.getContext '2d'
          context.drawImage @, 0, 0, canvas.width, canvas.height
          
          preview.appendChild canvas
          
          @currentTime += @duration / 10.0 unless @ended
          
          ), false

        video.addEventListener 'loadeddata', (->
          preview.innerHTML = ''
          @currentTime = 0
          
          ), false
            
        video.src = url
        
        ), false