Lumiere prototype
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
README.md
index.html
popcorn-test.html
video-editor.html

README.md

A drag and drop video player. Connect videos visually to determine the sequence. (Chrome, please)

Play with it here: http://michelleboisson.github.io/Drag-Drop-Video-Editor/

WHAT IT DOES

##You can:

  • drop videos in the placeholders from your desktop

  • move the videos around by grabbing them and dropping them

  • click individual video thumbnails to play/pause the video

  • attach the right dot of a video to the left dot of another video to have them play sequencially

  • ~~start a video then, ~~ click "play sequence" button to play the thumbs in squence

  • start a video then, ~~ click "play sequence fullscreen" to open up a bigger player where the videos will play in the same holder in sequence * click on this to enter true fullscreen mode * "play sequence fullscreen" button turns into "close fullscreen" button ~~ for now, the user must start the first video by clicking on it, so the player knows where to where to start

  • double-click a video to open the editor

    • move the sliders to set in and out points for the clip
    • click delete button to remove from canvas

STILL TO DO

  • have the player know what the first video is, without the user having to click on it
  • make the entire canvas scalable and moveable
  • cross-fade effect between video clips
  • look into cleaning up anchors and connectors (why do they move?)
  • more feedback/labels/directions on the UI

HOW IT WAS MADE

this was a mashup up of code from this mp3 player, modified to play video http://ex.fm/labs/local

And the line drawing tool is taken from http://jsplumb.org/jquery/demo.html

Some video control stuff from popcornjs.org