Apple has disabled programmatic playback of audio and video in HTML5. Essentially, the only way a webpage can play audio or video for a user, is if that user clicks a play button.

This works:

<a href="javascript:audio.play()">Play</a>

This doesn’t:

<script>
setTimeout("audio.play()", 1000);
</script>

Despite all of Apple’s statements about being pro web standards, they have crippled HTML5 as an App platform. Here is their reasoning:

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
Source

Even though they state autoplay is disabled, all JavaScript initiated play() calls are ignored in MobileSafari.

That reasoning is hogwash. Two out of the three iOS devices are sold wifi only (iPad & iPod Touch). This business decision (not a technical one, mind you) completely eliminates an entire class of web applications. Those that would mimic native Apps found in the Apple App Store.

Awesome HTML5 Games like: Bio Lab and HTML5 game engines like: Impact are now useless on iOS. A simple thing like making a click sound when a user touches a button and playing background audio at the same time will not work.

While desperately searching for workarounds, I’ve found a few possible solutions. However, as of iOS 4.2.1, even these are now all disabled by Apple. There has been surprisingly little noise about this. I suspect that it has flown under the radar so far.

Technical Details

I spent quite a bit of time hunting down possible workarounds. Here is what I found (applies to both audio and video):

1. MobileSafari will initiate a audiotag.load() inline when audiotag.play() is called without audiotag.load() called first.
2. MobileSafari will not allow audiotag.load() to be called by asynchronous javascript. (i.e., not initiated by a user action.)
3. You must call audiotag.load() then audiotag.play() on MobileSafari. Because load() has to be user initiated, we must call load() on every audio track that will be played in the current chapter. (A.K.A., preloading)
4. Preloading using existing methods does not work because MobileSafari does not send onload events. We must listen to the progress event to determine an asset as loaded. (Platform specific workaround)
5. MobileSafari will give a “stalled” event when trying to preload a second audio track after the first is loaded. It will not load the second track. Calls to play() on this track will fail silently. (Likely, this is a memory issue. MobileSafari is working with 256 MB of memory, it probably can’t hold more than a few tracks in memory and, thus, will not allow more than one audio/video track loaded. We would typically just not preload the audio tracks. However, because of #2, we are now in Game Over Man)

As a last resort, I created a shell iPad App that had a single UIWebView. You can use these properties:

UIWebView.allowsInlineMediaPlayback = YES;
UIWebView.mediaPlaybackRequiresUserAction = NO;

This will allow you to work around the issue. But, hey, we are no longer an HTML5 app available online now are we?

I am happy to announce that Flowz is currently hiring for a variety of roles around iOS development in the Detroit Metro Area.

Now you maybe thinking, “Damn, I really would love to work for such an awesome, cutting-edge company. But I don’t know Jack about iOS!”

Well, that’s just fine! We have internship positions open, as well. We’ll train you in the Flowz way! Details and applications go here:

http://www.internships.com/posting/iOS-Developer

And some of you might be saying, “I’m not ready for a long term relationship, yet.” That’s fine too. We love freelancers! We have a cozy network of people with no ties to us other than their 1099. Introduce yourself and let’s make something great!

Apply within…

We are looking forward to meeting you!

We added Raveal Voice some time ago as a way to better capture your professional profile. Your resume and portfolio are great for the long term vision of what you have done. But the sampling rate of projects, galleries, and employers isn’t quite high enough to match the rapid updates of today’s social networks. Additionally, you likely care about your job and talk and write about it outside of work. A resume and portfolio doesn’t capture this. Raveal Voice does.

It’s very simple to configure:

Visitors to your profile see your content from other networks:

Raveal Voice was introduced as an option only available to Pro users. Today we are announcing that going forward, Raveal Voice will be available for all Raveal individual accounts holders.

You may have noticed some pretty cool tricks we do in different parts of the application.  If you haven’t, check out this video:

One of the things that kept bugging me was our animations in Firefox and Safari were lagging behind  Internet Explorer.  They were just plain choppy.  Some time ago I found that the problem was related to the shadows we added to each section on the page.  The effect was stunning and we could do it without the traditional HTML gook it required to pull off.  The drawback?  It wasn’t supported by Internet Explorer.  (No surprise there, Internet Explorer… well, never mind that.)  Initially, the problem was really bad.  So bad, you noticed scrolling choppiness.  But with Firefox 3.5 and Safari 4, the problem virtually disappeared.

Unfortunately, it was still too laggy. So we dropped the shadows completely. Does it look as nice as before? No. But it is a much better experience in the end.

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
	type="text/css" href="css/highdpi.css" />

But that is only 1/3rd the story.  How do you make sure high resolution images are used when viewing with a High-DPI display?  Aral Balkan has the answer: http://aralbalkan.com/3331 But what he illustrates only works for “sprites.”  That is, divs and other elements that use background-images where the src is specified in CSS. In that special CSS file, we specify the size of the background and include high-res background images that override the normal CSS. However, there is the problem of elements that specify their src in the HTML. I.e., img, video, etc. Aral, touches on what is required but leaves the implementation as an exercise.  I’ll dive into the details:

1. Create double resolution copies of all your images. Name these with a suffix of “@2x”. So for logo.png, the double res would be logo@2x.png. Make sure that all of your image tags have at least a width attribute specified. (But, you are already doing that aren’t you?) If you don’t, your image dimensions will be increased to the new high-DPI source by the browser.
2. Create a highdpi.css file.  Contents:

   .replace-2x {
   	font-size: 1px;
   }

   The sole class, .replace-2x contains an attribute that has no effect on img tags. This is the flag that will tell our javascript it is okay to do image replacement.

3. In your source HTML, add the replace-2x class to all of your images that have a double resolution counterpart.
4. In your HTML head, add the link for your high-dpi stylesheet:

   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
   	href="/css/highdpi.css"/>

5. Create and include in your source, a highdpi.js file.  We are going to assume you are using jQuery for your site.  Contents:

   function highdpi_init() {
   	if(jQuery('.replace-2x').css('font-size') == "1px") {
   		var els = jQuery(".replace-2x").get();
   		for(var i = 0; i < els.length; i++) {
   			var src = els[i].src
   			src = src.replace(".png", "@2x.png");
   			els[i].src = src;
   		}
   	}
   }
   jQuery(document).ready(function() {
   	highdpi_init();
   });

The trick here is that we check to see if the font size for our special class is set to value declared in our high-DPI CSS file. (Our flag) It will only be set if the browser passed the media query. If the flag is set, grab every element in the DOM with the replace-2x class and change the src attribute to point to our high-res counterparts. If you have access to one, pull up http://flowz.com on an iPhone 4 and take a look at our logos here (zoom in if it isn't immediately apparent to you):

Image without ".replace-2x"

Image with ".replace-2x"

(Under normal DPI monitors, the images will look identical.)

1. Note: all text looks good, except text rendered using Cufón and sIFR. We hit that problem. A blog post will follow on that. ↩

Sidebar

I really, really wanted to be able to do something different then what I described above. I wanted to define a class: .highdpi-supported on the body tag of all the pages that support high-dpi. I then wanted to add an uncommon attribute on that class to act as the flag to tell javascript to go ahead with image replacement. Unfortunately, I could not find any such attribute that was relatively safe *and* didn't affect page layout. So in the end, I'm stuck with adjusting the font-size attribute on the .replace-2x class.  Maybe someone else can come up with a better flag.

Just about every second of our first two years was spent working on products.  This past month, we decided to take a breather and work on our own website.  With this launch, you’ll find more about who we are as a company.  Not just our products, but our services and even our open source contributions.

We are putting more focus on development.  You’ll see new blog posts about development tips and tricks.  (We have quite a few up our sleeve.)  I’m very happy about this.  Until now, all of my technical content was shoved out to a personal website.

Also, you might notice a new product being flashed on the home page.  That’s BounceOff.  We are quite proud of it but not yet ready to talk in depth about it.  However, if diving into new products and blazing the beta trail is your thing, go request an invite to join in at http://bounceoff.com.

Now, back to the coal mines…

One of the biggest barriers many applications have is the sign-up process.  You have to balance the information needed to create an account, with the effort a user goes through to enter that information.  Many times the user looses in that tradeoff.  I wanted to make the sign-up process as easy as possible for our apps.  In fact, we need only 4 items from a user: first and last name, email, and a password.  (And, by golly, we will soon combine first and last name into one field):

One Step Registration

Further, the goal of Raveal is for others to discover you.  We spend quite a bit of effort in getting our Raveal profiles indexed with major search engines.

The side affect of these two things is that many “Search Engine Optimization” douche-bags have caught on and are creating accounts for spamming search engines.  Of course, none of us here have any patience for these practices and shut down the accounts within minutes of being created.  Luckily, the flow is just a trickle.  However, I do fear that if the number of spam accounts increases, we’ll have to put measures in place that increase the amount of effort new users spend on getting setup.  And that pisses me off!

So we’ll do our best to not mess up a good thing while keeping these spamtards out of our system.

Typically, any application service created in the past few years runs “in the cloud.”  Ours was no different.  We opened our doors running on a grid provided by 3Tera (http://3tera.com).  They have a unique twist on virtualization that really stands apart from the rest of the industry.  They take object oriented programming principals and apply them to virtual machines.  This can be described by a simple comparison between VMWare and 3Tera:

• With VMWare, you have to startup a virtual machine and then log in to the OS to configure settings.
• With 3Tera, the OS resides in a “black box.”  You configure settings with the black box.  Internally, when the OS starts, the black box hands off the settings to the OS.  I.e., the OS never has to be started to configure it.

Much like creating a class in programming, the class has functionality hidden from view.  You set values for class fields and it does something for you.  What this means is you can easily create a catalog of virtualized OSes that are trimmed down to task specific appliances.  E.g., you have a DB appliance and a Load Balancer appliance.  You then reuse these appliances in your applications by pulling them out of the catalog and configuring them.

The technology is pretty amazing.  Unfortunately, for various reasons, the solution wasn’t working for us.  We were seeing a significant amount of nodes in our cluster failing due to hardware and software bugs and datacenter mis-management.

So we began the process of moving to a different platform.  As these things do, it took longer then expected.  But that’s okay, because, in the end, the migration happened flawlessly.  As of  2 AM EST last night, all of our services have been moved over to Joyent (http://joyent.com).  For those hip on hosting providers, you’ll notice that this move involved a switch from Linux to OpenSolaris!  Yes, we are all converts now and absolutely adore what OpenSolaris has to offer.

You should see a bit of speed increase in accessing the apps.  Latency might be a bit better for our European customers as the DC is in New England now.  If you notice anything strange, feel free to contact us over at http://support.flowz.com.

Here is a sample of what it looks like (with uninspiring techno geek images):

Flickr stream

I’m really excited to finally get this out to users.  This functionality was actually developed way back in August!  We had to disable it in production because Flickr’s approval process might be the only thing on the planet worse the the iPhone App Store approval process.  It took 5 months to get approved!

But hey, at least it is here now.

We are now presenting *all profiles beneath the main showcase. This is using the same visual layout that you get when you use our visual search engine. Visit the showcase.

Remember, the goal of Raveal is for companies and clients to discover *you*

More to follow…

(*all being all profiles that have at least a minimum amount of info and are marked public)