Category Archives: Web-Development

Mozilla’s Popcorn Maker Brings Video Remixing to the Masses

Mozilla has released Popcorn Maker 1.0, the company’s mashup-creating, video-editing suite for the web. Popcorn Maker makes it easy to pull just about any content on the web into a video container you can then publish back to the web.

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.

Proposed ‘Main’ Element Would Help Your HTML Get to the Point

HTML5 has several new tags designed to make HTML more semantic — there’s <nav> for navigation elements, <header> for headers, <footer> for footers and now there just might be <main> to wrap around, well, the main content on a page.

The W3C’s HTML Working Group, which is charged with creating HTML, has accepted a proposal to add a draft specification for the <main> tag to HTML. The actual HTML spec hasn’t been updated yet, but you can read through the earlier, unofficial <main> docs.

The proposal has been around for some time, but former W3C HTML editor Ian Hickson opposed it on the grounds that its use case was too close to <article>. Since then the mailing list discussion has turned up enough supporters and use cases for a <main> element — including for a “reader” mode like thatoffered by Apple’s Safari, or to exclude non-main content from a search — that it looks like it will make the cut (Update: check out this W3C wiki page for more use cases).

It’s unlikely that <main> will make it into HTML5, which is about to reach the stable stage after which no new elements can be added, but it could make it to HTML 5.1, due to be finalized by 2016.

As Mozilla WHAT WG member Henri Sivonen writes on that group’s mailing list, “I think it was unfortunate that didn’t make it to the same round of added elements as <header>, <footer>, <nav> and <aside>… but it’s not too late to add it — browsers update faster than they used to.”

The purpose behind <main> is to give web authors a more semantic way to indicate a page’s main content. In many ways it mirrors what WAI-ARIA does with the “main” role.

In fact, because a <main> element would more or less bring the semantic power of ARIA’s role=main to HTML proper, you can get most of the benefits of the proposed <main> tag today, by just adding the “main” role to your primary content wrapper, something like:

01 <div role="main">
02     <article>
03         <h1>Top 10 Linkbait Headlines for Hacker News</h1>
04         <time datetime="2012-12-11T03:21:22">December 11th, 2012</time>
05         <p>... etc </p>
06     </article>
07     <div id="comments">
08         <article>
09             <h5>Comment Title</h5>
10             <p>Comment body</p>
11         </article>
12     </div>
13 </div>

In this bit of pseudocode the main role tells the user agent — a web browser, search engine spider, etc. — that the primary content of the page is the article and the ensuing discussion in the comments.

So if you can do it already with ARIA why add <main>? The simple truth is that hardly any sites use ARIA roles. Because <main> is simple to use, web developers are more likely to use it and use it correctly (try searching for tutorials on how and when to use <article> and <section> to see the opposite effect), which in turn makes it a more reliable indicator for search engine spiders.

DRM for the Web? Say It Ain’t So

So far it ain’t so, but some form of DRM in HTML is becoming a more likely possibility every day.

The W3C’s HTML Working Group recently decided that a proposal to add DRM to HTML media elements — formally known as the Encrypted Media Extensions proposal — is indeed within its purview and the group will be working on it.

That doesn’t mean that the Encrypted Media Extensions proposal will become a standard as is, but it does up the chances that some sort of DRM system will make its way into HTML.

The Encrypted Media Extensions proposal — which is backed by the likes of Google, Microsoft, Netflix and dozens of other media giants — technically does not add DRM to HTML. Instead it defines a framework for bringing a DRM system, or “protected media content” as the current draft puts it, to the web.

If you think the idea of DRM seems antithetical to the inherently open nature of HTML, you’re not alone. Ian Hickson, former editor of the W3C’s HTML spec, has called the Encrypted Media Extensions proposal “unethical.” Hickson is no longer in charge of the W3C’s HTML spec, but HTML WG member Manu Sporny, has already asked the WG not to publish the first working draft because the “specification does not solve the problem the authors are attempting to solve.”

There are numerous problems with the Encrypted Media Extensions proposal, including the basic fact that, historically, DRM doesn’t work.

Other problems specific to the current draft of the proposal include the fact that it might well be impossible for open source web browsers to implement without relying on closed source components. Then there are the gaping security flaws that would make it trivially easy to defeat the currently defined system.

But Sporny raises a far more ominous objection — that the proposal in its current form does not actually define a DRM system. Instead it proposes a common API, which would most likely lead to a proliferation of DRM plugins. Here’s Sporny’s take:

The EME specification does not specify a DRM scheme in the specification, rather it explains the architecture for a DRM plug-in mechanism. This will lead to plug-in proliferation on the Web. Plugins are something that are detrimental to inter-operability because it is inevitable that the DRM plugin vendors will not be able to support all platforms at all times. So, some people will be able to view content, others will not.

That sounds a lot like the bad old days when you needed Flash, Real Player, Windows Media Player and dozens of other little plugins installed just to watch a video.

That’s a web no user wants to return to.

At the same time there continue to be companies which believe DRM is essential to their bottom line and the web offers no solution. That’s why Flash, Silverlight and other DRM-friendly plugins remain the media players of choice for many content providers.

So the question of DRM on the web boils down to this: should the W3C continue to work on a spec that defines some kind of DRM system or should the interested companies go off and do their own work? For its part the W3C clearly wants to be part of the process, though it remains unclear what, if any, value a standards-based DRM system might have for web users.

A Design Contest for Web Fonts

The Web Font Awards are coming soon. It’s a new competition recognizing the most beautiful applications of web fonts in site design and technological achievements in type on the web. There’s no entry deadline or submission guidelines yet, but the contest will involve an actual meatspace awards ceremony and real cash prizes.

From the Web Font Awards site:

The Web Font Awards – the first ceremony to celebrate the newfound typographic freedom empowering Web designers across the globe. The Web Font Awards will be a design competition for websites using Web fonts. Aimed at promoting Web font awareness and adoption, the competition will be open to eligible users of any Web font service or technology.

Sign up at the site to be notified of dates, deadlines, rules and requirements as soon as they are available. Though we’re guessing this site (possibly NSFW) already has the top prize in the bag.

Shape Type: The HTML5 Typography Game

Attention type nerds, did you know there are online games just for you? It’s true, Shape Type is a new HTML5 typography game where you have to drag curve-adjustment tools to perfect letterforms in various font faces. The closer you get to the actual letter the higher your score.

Shape Type is the brainchild of web developer Mark MacKay, who also created Kern Type (you guessed it, a competitive game of type kerning) and the nostalgia-inducing memela, a lite-brite inspired drawing app.

Shape Type uses the Raphaël JS library for its vector graphics. In order to play you’ll need to be using a modern browser, but so long as you’ve got the latest release, all the major browsers will work.