Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 

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

About

Lumiere prototype

Resources

Releases

No releases published

Packages

No packages published