Mozilla has always been a driving force for innovation in Web and anyone can hardly question their contributions towards a more open web. You should definitely checked out their cool first person shooter BananaBread Demo which is completely built off WebGL and runs entirely in the browser. Coming back to the topic, Mozilla recently launched a completely online HTML5 based live video editor, Popcorn Maker which lets you take your online videos to a whole new level of dynamic interaction.
In this quick tutorial we will run down quickly on how to leverage the awesomeness of Popcorn Maker to turn those boring videos in YouTube which seem to be forever stuck in a box much more interactive with embedded tweets, live maps , graphics and more.
Lets hear more about about Popcorn
Popcorn Maker, is completely based on Mozilla’s own Popcorn.js. Popcorn Maker lets you edit videos online, be it from YouTube, Vimeo or any HTML5 based video. Popcorn.js was launched last year and it is an HTML5 media framework written in JavaScript for anyone who wants to create time-based interactive media on the web.
Eh this looks complicated… wait
Looks interesting? Lets get started. The core concept in Popcorn maker is very simple. You take a HTML5 video that is hosted on platforms like YouTube or Vimeo, and make it interactive by embedding tweets, images, maps and more. Also do not forget that the Popcorn Maker also lets you do some basic edits to the video like pause , loop or skip a portion of the clip. While all this may sound complicated, the super clean web interface of the popcorn helps us get the job done really fast.
Step 1 : Prepare
We begin by adding the video to the editor. This is as simple as pasting the URL of the video you wish to edit in the media tab. As mentioned earlier you can use any YouTube, Vimeo or HTML5 video. The clip might take a while to get imported fully depending on the length of the footage.
Step 2 : Let your creativity flow
Now once the video is fully loaded, navigate to the Events tab. Adding an event is simply done by dragging the desired event into a layer of the video timeline.
Note that if you want multiple events at the same time, you can simply do so by adding the additional events into a separate layer. After you are done adding, simply customise the event to your liking in the right pane. Popcorn lets you adjust timings, fonts, transition effects and a lot more. It is better explored than said.
Step 3 : Customise the timings
To adjust the event duration, either you can directly input the starting and ending timings or just drag the event in the timeline to your desired length. If you want to pause or loop a certain portion of the video, you can just add the respective events to the timeline as well. The cool part about Popcorn is all the editing is done live. That is quite a feat for an online video editor I must say.
Step 4 : Share it
To save your project you just have to login with your email address. To share the video, you can either embed the whole video in your blog or simply, share the direct link to the video. You can also tweet about your video within Popcorn Maker. Drop your creations with the Popcorn Maker in the comment section!
