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.

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…

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.

Our visits to Raveal, broken down by browser:

To me, the insanely interesting bit is that IE is only #3 and is actually way, way behind. That Safari is our #1 browser, though Firefox is only a tenth of a precent behind, is also shocking.

Obviously, that shows that the majority of our audience is Mac users.

Looking at Flowzit, the numbers are similar:

Though, IE is even further behind in this case.

If you are like me, then what you really want to know is when will the world finally kick the dead weight of IE6 to the curb? Of course, our numbers are a minority representation. But still. Check it out:

Raveal:
Internet Explorer 6: %0.0133

Flowzit:
Internet Explorer 6: %0.0028

Wow! That gives me warm and fuzzies!

http://webworkerdaily.com/2009/05/11/raveal-the-future-of-online-job-hunting/

We are thrilled to have such positive feedback for an app in its early stages.  And we are taking the criticism to heart.  :)  We are working on better categories right this minute.

UPDATE 5/11: (later that day…) CNN Money has picked it up: http://money.cnn.com/news/

Instead, let me jump into why we created Flowzit when there are already dozens of “File Sharing” applications out there. It can be summed up pretty easily:

They all got it wrong.  ;)

Every one tries to simply solve the problem of email and large files, each with a different twist or trick.  But no one took a step back and looked at why we even need to send large files in the first place!  There is more to it then just uploading a file, typing a message, and sending an email.  That would be like just saying, “Here you go!” When, many times, you really need to say, “Here you go, what do you think?”

That’s why Flowzit’s motto is: “Present, Share, Approve” and not “Here you go.”

Any file sent with Flowzit can be part of approval process.  Files are shown, for lack of a better term, visually so they look great as part of a presentation to prospective or existing clients.  For the non-business folk out there, having a conversation with an old friend and sharing pictures is actually really FUN and EASY.

Messages are more akin to forum posts

One more way we were thinking “out of the box” with Flowzit is our built-in support for “mini-sites.”  You can zip up an entire folder of HTML, images, css, and javascript and Flowzit will present it to your recipients (and only your recipients¹) in a preview window just like it was a single file.  You can even click through the site contents!  To see what I mean, check out this video howto on mini-sites.

An entire website in a controlled environment!

Are we done after Flowzit?  No way.  Flowzit is actually the smallest player in an overall scheme of world domination a much larger product suite.  Of course, I’m not going to say anymore on that.  :)

If you haven’t already done so, go check Flowzit out.

We must be number 3,000,000 and 1.  Luckily, people are not presented with those facts on a daily basis or one might wonder just what is the point of starting a new business?  Competition like that must be tough.  After all, given those numbers, odds are, you are competing against at least 10,000 other businesses trying to do the same thing.  How do you differentiate yourself?

Well, there are a few things I have learned during my time in various industries.  After years and years of pounding my head against the insurmountable brick wall of illogical reasoning, I have discovered the following rules, which I dub, “Flowz’ Laws of Business Asininity:”

1. Business is too complicated.
2. People, naturally, try to over complicate process.
3. Technology is getting in the way of getting things done.

Obviously, these are not good laws.  We do not like them Sam-I-Am!  But what can we do about it?  Fight back!  That’s what!

Suddenly, we have a reason to be 3,000,000 and 1!  We must provide asylum to poor individuals and businesses running from the chaos of illogical reasoning.  Fear not my ravaged children, there is hope!

Our general philosophy is that these rules need not apply.  We can make business simple!  We can simplify process!  And, of course, technology should be our friend!

This is the FLOWZ way of thinking.

Our first step is to provide the technology that doesn’t break any of the 3 Asininity Laws.  We put together this blog as a second step towards pointing out the asinine and what to do about it.  Too many applications out there took input from customers and clients that started off with something like “We need to add this field” or “We must have two-phase commits” or “We must use this multi-step workflow”.  All that remains, when 1.0 is released, is complex software that, in the end, only a small number of people use.

Enter stage left: Flowzit.  This application provides a relatively simple work flow: sending and receiving large files.  However, we applied the FLOWZ way of thinking when we started the project by first asking WHY and not HOW.  That one decision changed everything.  I have a file, I need to send it to someone.  The question isn’t HOW shall I send this file, but WHY am I sending this file?

The result is an application that is simple, flexible, powerful, and most important of all, improves your daily workflow.

This is just our first step.  We have a long road ahead of us.  Why don’t you join in on the fun?  Every so often, check out this blog (over.flowz.com), and of course, go create an account with Flowzit.com.