Webmaker - Sequencing Web Media

by David Humphrey

One of the most requested new features we get for Mozilla Webmaker is web media sequencing.  Users want to be able to use multiple video or audio clips in a single experience.  This past week Scott and Kate, with help from Matt and Chris, have been building and testing a solution in Popcorn Maker.

The idea is to make it easy to pick media clips, including HTML5 audio and video, YouTube, SoundCloud, and Vimeo, and let users position each clip along the timeline, and within the video canvas.

Here two YouTube clips have been added to the gallery.  I might want to use the video from one (surf video) and the audio from the other ("Wipe Out").  The sequencer supports video+audio, video-only, and audio-only for each clip.  Next you figure out where to place clips in the timeline:

Here a Vimeo video and an HTML5 video are positioned within the timeline so that the former will start part way through the latter.  We can also specify the position and size of each visual clip within the video canvas, which means we can do interesting parallel layouts of multi-video experiences.:

In this example, four separate YouTube videos are positioned into a common space, with one of them occupying the majority of the space, and thereby emphasizing its importance  Each clip can be resized or moved (you can see that one of the clips is selected in the editor and has resize handles).

The Sequencer feature is still in active development, but is ready to be tested.  You can already make some interesting things with it.  Here are some examples you can look at: