Popcorn Maker 1.0 makes video remixing a snap. Image: Screenshot/Webmonkey

Despite the interactive nature of the web, video on the web remains little more than glorified television in your web browser — a passive experience in the midst of the otherwise interactive online world.

It doesn’t have to be that way. HTML5 makes video into just another HTML element — editable, hackable, remixable.

It’s HTML, after all. And that means it can interact with other HTML elements or use JavaScript to augment video in real time — annotating videos with information like location, details about the people and topics in the video, subtitles, Twitter feeds, current weather information, links and much more.

The problem is that there aren’t a lot of tools that make it easy to create interactive web videos, which is where Popcorn Maker comes in.

Popcorn Maker is a free online video editor for mashing up, remixing and adding outside content to web videos. Popcorn Maker’s drag-and-drop timeline interface makes it easy to pull all kinds of outside web content into your videos. For example, add photo overlays, maps, links, in-video pop-ups of Wikipedia entries, Twitter widgets with relevant hashtag searches and so on.

As you would expect from the makers of Firefox, Popcorn Maker is built entirely from web technologies — pure HTML, CSS and Javascript. But more than just being an impressive use of web standards, Popcorn Maker 1.0 is a genuinely easy-to-use video editor and that’s no small feat regardless of which tools you use to build it.

I’ve been playing around with Popcorn Maker for a few days now and it does indeed deliver on its promise to bring video editing to the people. To get started you just need to pull in a video you’d like to annotate or remix. Adding a source video is just a matter of pasting in a link to a YouTube, Vimeo or Soundcloud video. Alternately you can just add a link directly to your video file.

Once you’ve got your base video (or videos) in Popcorn Maker, adding elements to it is as simple as grabbing one of the “events” from the right hand side of the editor and dragging it onto either the video stage itself, or the timeline below. Once your event is in the timeline you can change the settings, resize it, move it around and otherwise tweak it to behave the way you’d like.

Once everything is working the way you want, just click the share link and Popcorn Maker will give you either a link (or an embed code) you can paste anywhere on the web.

To get started remixing videos, head on over to the Popcorn Maker site. If you want to see some examples, check out new Popcorn Maker projects on Webmaker.org. For more background on how Popcorn Maker works, check out the Mozilla Hacks blog post and watch the video below.

Mozilla is getting closer to making H.264 video work in Firefox.

The company’s recently released Firefox for Android already bakes in OS-level support for the H.264 video codec and now Mozilla is adding support to desktop Firefox as well.

Mozilla long opposed supporting the H.264 codec because it’s patent-encumbered and requires licensing fees. It’s also the most popular codec for HTML5 video on the web, which drove Mozilla to swallow its ideals and get practical about adding support to Firefox. Instead of including the codec directly in Firefox, the browser will rely on OS-level tools to play H.264 video.

There’s still no support for H.264 in the current desktop version of Firefox, but as Mozilla CTO, Brendan Eich recently noted on his blog, work is under way and, with the exception of Windows XP, all platforms will get OS-native codec support for H.264 video. Windows XP, which lacks OS-level tools for H.264, will continue to use the Flash plugin to play H.264 movies.

If you’d like to keep track of Mozilla’s progress adding H.264 to the desktop there’s a tracking bug that follows solutions for all the major desktop platforms. Eich does not give an explicit timeline or any hint of when H.264 support might ship with Firefox on the desktop.

The HTML5 video element was supposed to offer a standards-based way to play movies on the web without proprietary plugins like Flash or Silverlight. Unfortunately that dream has failed to pan out. Instead of proprietary plugins, the web ended up with proprietary video codecs, which has created a split in browser support for HTML5 video. Firefox and Opera support the open Ogg and WebM codecs, while Safari and Internet Explorer supported H.264.

Mozilla (and Opera) were against the adoption of H.264 on ideological grounds — H.264 is not an open codec and requires that companies using it pay royalties. But earlier this year the company partially reversed course and said it would support H.264 on devices where the codec is supplied by the platform or implemented in hardware.

In announcing its change of heart with regard to H.264, Eich wrote, “H.264 is absolutely required right now to compete on mobile. I do not believe that we can reject H.264 content in Firefox on Android or in B2G and survive the shift to mobile…. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.”

However, while Mozilla may have abandoned the fight against H.264 in HTML5 video, it has taken up the same banner when it comes to WebRTC. WebRTC is a group of proposed standards that will eventually make web apps capable of many of the same feats that currently require platform-native APIs. In his recent post detailing the progress of H.264 support, Eich says that Mozilla is still focused on “the fight for unencumbered formats” for WebRTC, and promises “more on that front later”.

Image: H.L.I.T./Flickr.

Popular video-sharing site Vimeo has added a tip jar, which allows Vimeo users to accept payments from anyone who enjoys their movies.

To use the new Tip Jar you’ll need to be a Vimeo Plus or Vimeo Pro member, but provided you’re already set up with a paid account, enabling it is as simple as adding a PayPal account and checking a box on the video’s advanced settings page. Once that’s done a “Tip This Video” button will appear underneath the video player on Vimeo.com, allowing viewers to leave tips in appreciation for your cinéma vérité efforts.

The fine print taketh away a 15 percent service fee and you’ll need to have a verified PayPal account in order to claim your money. Also note that you cannot accept tips on commercial or political videos, nor can you use Tip Jar as a way to raise money for a political cause.

Obviously Tip Jar probably isn’t going to make you a millionaire in most cases, but if your video goes viral to a particularly generous audience — who knows?

For a more reliable way of making money on Vimeo, the company also plans to roll out a pay-per-view service later this year. The pay-per-view offering appears to be limited to Vimeo Pro members. The Vimeo blog offers little in the way of details, saying only that pay-per-view will add “tools to charge for access to your videos, with no coding required.”

Size matters. Image: Screenshot/Webmonkey

Nothing grabs a user’s attention like a big, full-window video on a landing page. For example, check out Path.com. However, with all the various screens potentially connecting to your site these days, making sure your movie plays full-window on all of them can be tricky.

That’s where BigVideo.js comes in. Developer John Polacek‘s BigVideo is a jQuery plugin for adding big background videos to your site. The plugin makes it easy to drop in a single video URL and get fit-to-fill background video that takes up the whole window. The script will fall back to displaying an image on devices where video doesn’t work.

BigVideo can also handle playlists, serving up a series of videos, as well as a very cool feature to play videos without the sound. And yes, you can (and should) add a button to allow users to turn the video off altogether. That said, I left BigVideo open, running in a background tab for several days and it didn’t have a noticeable impact on performance.

For more info, head over to the GitHub page where you can see BigVideo in action, get a full list of features and grab the code for your own site.

Humorist and web artist extraordinaire Ze Frank is returning to the internet airwaves with new episodes of The Show. The Show, which Frank wrote, produced and starred in, was a daily video show about, well, everything.

Although much-loved by sports racers everywhere, Frank stopped making The Show in 2007, after roughly a year’s worth of daily episodes. But now The Show is back. After a wildly successful Kickstarter campaign, Frank has released the first episode, “An Invocation for Beginnings.”

Not only are we happy to see The Show return, the first episode also serves as an inspiration for any who’s is trying to start something. As Frank puts it, “anyone who’s stuck between zero and one.” So enjoy the first episode of the new The Show and then get out there and make something awesome and “enjoy the cheese of accomplishment.”

A webpage doesn’t have to look the same in every browser. In fact, a webpage shouldn’t look the same in every browser, according to former Yahoo developer and JavaScript guru, Nicolas Zakas.

Zakas, who spent five years as the front-end tech lead for the Yahoo homepage, recently spoke at the March BayJax Meetup group about what he calls Progressive Enhancement 2.0 — offering users the best possible experience given the capabilities of their device.

Not the same experience, mind you, but the best possible experience. That means progressively enhancing sites according to the device’s (browser’s) capabilities.

Progressive enhancement is perhaps best summed up by the famous Mitch Hedburg quip, “an escalator can never break, it can only become stairs.” In other words, if you’re building websites well they never break, even if you look at them in Lynx. The site may not look the same in Lynx as it does in, say Chrome, it may not function as smoothly, but the core content is still there and can still serve as a stairway that gets people where they want to go even when the enhanced ease of the escalator is absent.

More practically, progressive enhancement means starting with the least capable devices — an older phone, Lynx running on Windows 95 — and then adding more sophisticated features based on screen size, bandwidth and so on.

Zakas also takes on the common assumption that a web “page” is analogous to the printed page. In fact Zakas argues the web is more like television, which has a similar separation of content and device. In that analogy old browsers are like black and white TVs. No one expects a black and white TV to play HD content, but everyone would be disappointed if you served black and white content to an HD TV. Hence the need for progressive enhancement.

If you’re well versed in the history of the web the beginning of the video may be a bit slow, but stick with it. Also be sure to watch the questions at the end where Zakas addresses how to progressively enhance more application-like web pages.

Inspired by Bret Victor's demo, Chris Granger's live editor helps connect you with what you're building.

Inspired by Victor’s presentation, developer Chris Granger has put together a similar live game editor in Clojurescript.

If you haven’t watched the video of Victor’s talk, you should start there, but the basic idea behind his real-time editor is to make your code more closely connected to what it creates, in this case a simple game. Granger’s take on the idea is similar — all changes you make to the code are reflected immediately in the running game. You change a line of code and the game immediately changes right with it. Here’s Granger’s video demonstrating the editor:

As Granger writes on his blog, “essentially I learned that Victor was right — there’s unquestionable value in connecting yourself with your creation.”

Granger’s demo code is available on GitHub and there’s a .jar file available for download if you’d just like to play with the demo.

We just had a moment similar to the time we first saw content-aware scaling in action, but this time it’s even better — we’ve seen the future of programming tools and it looks awesome.

Check out the video above of Bret Victor‘s recent talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. The video above of Victor’s keynote at the Canadian University Software Engineering Conference, captures a wonderful talk on living your life based on principles, but for many developers what’s most arresting are the software development tools demoed.

Do your current tools suddenly feel incredibly outdated? Perhaps you thought you were using a well-tuned coding machine but suddenly realize you’re really just hitting two stones together? Thought so. Sadly, the apps demoed in the video aren’t available. That’s all right, though; it just means someone needs to build them. Be sure to let us know if you do.