mebm

tutorial

https://bwasti.github.io/mebm/ (empty project)

mebm is a browser based video editor that supports animation of images and text overlays. The animation is done with key-frames (denoted in blue on the timeline) and linear interpolation.

The design values simplicity and rudimentary functionality over a full feature set.

usage

• space to pause/play
• select layers to manipulate them (click on the timeline or sidebar)
• shift + scroll or pinch to zoom text and images
• drag to move them
• arrow keys to jump between keypoints
• backspace to remove keypoints
• import
• by dragging in videos images or audio files
• by clicking "+ media"
• by pasting URLs to hosted media (only some domains)
• export by clicking "export"
• let video play to completion
• click "download" to grab a copy (.webm)

output:

todo

• timeline
• [ ] allow extending beyond current max time (medium)
• [ ] split audio play head (hard)
• [ ] splits in templates (medium)
• file management
• [ ] error on bad type (easy)
• [ ] animated .gif support
• editing
• [ ] menu for advanced settings per layer (easy)
• [ ] element selection by click (medium)
• [ ] undo (hard)
• [ ] face tracking (medium)
• [ ] opacity (easy)
• [ ] rotation (medium)
• compatibility
• [ ] chrome export bug workaround
• [ ] mouseover preview safari fix
• [ ] mobile touch events (partially done)
• code
• [ ] refactor/simplify MoveableLayer this.frames
• [ ] make video a MoveableLayer
• [ ] compress video frames
• [ ] investigate memory use warning on safari
• [ ] cache render output for thumbnails
• [ ] move height/width setting logic out of render loop
• [ ] improve text scaling logic (avoid font size, use ctx.scale)