Archive for the ‘Multimedia’ Category

File Under: JavaScript, Multimedia
Nov
19
2012

HUGEpic Embeds Massive Images Without the Huge Downloads

By

Hieronymus Bosch’s The Garden of Earthly Delights in HUGEpic.io.

HUGEpic is a web app for displaying massive images online and browsing them like you would a map. There are several Flash-based tools that can already do similar things, but HUGEpic doesn’t require a plugin, meaning it works perfectly well on both desktop and mobile devices.

HUGEpic means you can add very large images to your pages without forcing your users to download enormous files. HUGEpic works like Google Maps, but for images — only the data necessary for the current zoom level is actually loaded.

Developer Peter Bengtsson launched HUGEpic a few weeks ago, but it wasn’t until today that it gained its most useful feature — the ability to embed HUGEpic’s image browser in your own site.

Other nice features in HUGEpic include permalinks for bookmarking or sharing images with friends. The permalinks even remember particular locations and zoom levels within an image, as does the new embedding feature. As you pan around on your image, the position and zoom level are automatically inserted into the HTML embed code. There’s also an option to draw annotations on a layer on top of the image.

HUGEpic is what Bengtsson calls a “little fun side-project” so it may not stand up to massive traffic, but the code is available on GitHub if you’d like to set up your own instance of HUGEpic. [Update: As Bengtsson notes in the comments below, "all images are served from a Amazon CDN with servings from every continent in the world. Also, it's built to be very fast. The home page alone makes over 4,000 requests per second."] For more info on the tools behind HUGEpic — which include a Tornado server with MongoDB and Redis on the backend — see Bengtsson’s original blog post.

File Under: HTML5, Multimedia
Nov
12
2012

Mozilla’s Popcorn Maker Brings Video Remixing to the Masses

By

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

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.

Tags:
File Under: Browsers, Multimedia
Nov
6
2012

Make Flash Work on Any Website in Internet Explorer 10

By

Webmonkey.com in IE 10 on Windows 8. Photo: Screenshot/Webmonkey


Internet Explorer 10′s “Modern” (or “Metro”) mode includes limited support for Adobe’s Flash Player plugin — websites approved by Microsoft can access Flash, unapproved sites cannot. Fortunately, intrepid Windows 8 users have already found an easy way to extend Flash support to any website.

Microsoft originally planned to leave Flash out of the tablet-friendly version of IE10, but later changed its mind. Dean Hachamovitch, Internet Explorer VP, said at the time that Microsoft “believes that having more sites ‘just work’ in the Metro style browser improves the experience for consumers and businesses alike.”

But the only time Flash “just works” in IE 10′s Metro mode is when you visit sites Microsoft has approved. Developers can submit their sites to Microsoft for approval, but if you’d like to take matters into your own hands, user Marvin_S at the XDA Developer forums has figured out how to add whichever sites you like to Microsoft’s whitelist. To edit the whitelist, just open the file C:\Users\[USER_NAME]\AppData\Local\Microsoft\Internet Explorer\IECompatData\iecompatdata.xml in a text editor of some kind. Then add whichever domains you’d like to be able to access the Flash Player.

To make sure that your custom whitelist isn’t overwritten when Windows 8 updates the list, open IE 10′s Tools menu and select the Compatibility View option. Then uncheck the box labeled “Download updated compatibility list from Microsoft.”

Be forewarned that one of the reasons Microsoft has limited which sites can access Flash is to limit security vulnerabilities; editing the whitelist yourself and turning off updates may expose you to Flash-based attacks, especially given that during the testing phase of Windows 8 Microsoft was slow to apply Flash updates.

Tags:
File Under: Multimedia, Web Services
Nov
6
2012

Instagram Finally Embraces the Web

By

Instagram on the web. Image: Instagram.

Instagram is leaving the confines of the smartphone that birthed the wildly popular photo-sharing service to stake a spot on the web. Instagram began life as an iPhone-only photo-sharing app and eventually expanded to Android, but, until today, Instagram lacked a web presence.

The new Instagram web profiles are not the full Instagram experience on the web — there’s still no way to actually upload photos — but they do at least give you a URL to share with curious friends and family.

Your new Instagram URL gives your recently shared photographs a home on the web, along with your profile photo and any bio info you’ve added through the Instagram app. The web interface also handles most of Instagram’s basic social features, like following users, leaving comments and liking photos.

Instagram’s new web-based profiles are rolling out slowly over the next week. To see your profile, provided it’s available, just head to instagram.com/[username]. Assuming your photos are set to public, anyone will be able to see your profile by visiting that address; you do not need to be an Instagram user to view a public user’s profile on the web. If your photos are set to private they’ll only be visible to people that already follow you and are logged in to the site.

While the new profile pages mark Instagram’s first foray onto the web, the company has long offered an API and there are already numerous third-party websites that offer web-based access to Instagram profiles. Sites like web.stagram.com or statigr.am offer not only access to your photostream and comments, but additional features not found in the current incarnation of the “official” site — like embeddable gallery widgets and a variety of ways to view images.

Tags: ,
File Under: Browsers, HTML5, Multimedia
Oct
22
2012

Mozilla Plans H.264 Video for Desktop Firefox

By

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”.

Tags: , ,
« OLDER POSTS