Limitations of HTML5 Video and Audio in iOS

ipad-videoAs cool as the new HTML5 Video and Audio tags are for avoiding the need for plug-ins, in iOS (mobile Safari), it still has some problems.  Miller H. Borges Medeiros has a good blog post covering the issues.  Here are topics he discusses in more detail:

  • Can’t screenshot a video frame
  • Can’t play sound and video together
  • Can’t play multiple sounds or videos at the same time
  • Can’t control volume or mute using JavaScript
  • Can’t play video inline on iPhone
  • Can’t play sound or video without user interaction
  • Multiple HTML5 video elements on the same page cause bugs
  • Can’t play HTML5 video backwards (OK, I’m not sure why I’d do that anyway)

I recently was using JWPlayer which provides a nice one-stop Flash with HTML5 fallback (or vice-versa).  But it has the same limitations on iOS.  No real workarounds—just know the limitations and design around them.

The State Of HTML5 Video

If you are doing any work with video in the browser, this is a great writeup about the support of HTML5 across platforms.

The State Of HTML5 Video.

I think my takeaway is that for the next couple years we need to support a hybrid of Flash and HTML5, using MP4 as the format.  (When Chrome drops MP4 support we either have to use Flash there or encode for WebM.  But maybe by then there will be better WebM support).

Testing multiple versions of multiple browsers

There are a lot of browsers out there – IE, Chrome, Firefox, Safari, Opera, etc. – and so many versions of each. That doesn’t even count all the mobile browsers.  So how do you make sure your website work across all the different versions? 

Options

You can install the latest version of each browser on your development machine, and that does help work out many of the cross-browser kinks.  But you can’t really install the older versions on your machine too.

Internet Explorer’s Dev Tools (just press F12 in IE 9) do give you a way to see your site in IE7 or IE8 mode.  And it’s pretty faithful, though I’ve read it does have some discrepancies, especially in the JavaScript engine.  And that only would solve the IE testing issues – not all the other devices.

When I searched for solutions, Adobe’s BrowserLab kept coming up.  It’s currently free so that’s a plus, but it only shows the layout of a page.  It doesn’t let you interact and actually test.  And it doesn’t support all the different browsers.

Spoon.net

Enter spoon.net.  This site is a public-facing, cloud-based application virtualization service.  You sign up, install a small browser plug-in, and then it runs applications looking like they are just part of your OS, but they are really just virtual windows.  It gives access to lots of open source apps, but it also gives access to lots of browser versions.  Just look at the list below.

spoon

You just click Run, wait a few moments if it’s the first time, and you have your browser to test in.  Here’s the Firefox 6 instance I launched (I have Firefox 9 installed on my desktop, so this is definitely the virtualized app):

spoon_firefox

They do offer a free tier that gives access to just one device simultaneously.  You are supposed to be able to us all open source and purchased apps with the free version, but I did find that when I tried to launch some browser versions with the free version it said I could only use it for 2 minutes per 24 hours.  I’m not sure why some versions are free and others are not.  But the cheapest pricing tier is just $8 per month (or $60 per year) and gives you 5 simultaneous devices, access to all apps, the ability to install other apps, and more storage.  Quite reasonable.

Caveats:  They only have a Windows version of the plugin and they don’t have virtualized Mac or Linux instances.

It doesn’t solve the dilemma of how to test on the plethora of mobile devices out there, but this definitely simplifies testing all the desktop PC browsers!

Autoscale, center an image with overlaid elements

The Problem

I recently had an interesting web layout problem.  I needed show a picture in the center of an area on the screen.  That’s normally pretty easy, but I also had a few extra requirements:

  1. The image should expand proportionately to cover as much of the stage as possible.
  2. The image should not scale any larger than a given size.
  3. I needed to overlay elements on top of the image (a hotspot in my case) that scales proportionately and retains the same relative location.

At first glance the answer would be to use some absolute or relative positioning and use a background-image with the background-size:cover (at least in modern browsers).  I did need to support IE7, which hurt that approach, but the requirement to overlay an element and scale it was also an issue.  When using background-size:cover, the element isn’t forced to stay proportional, just the image maintains proportions.  I needed to keep the actual element proportional too or I wouldn’t know where to put the overlaid element.

The Layout Approach

The answer does require some JavaScript, but CSS can get us halfway.  Here is the layout we need:

layout

HTML

So let’s set up the HTML (we won’t worry about the footer – just leave space for it:

<div id="stage"> <div id="imageHolder"> <img src="SomeImage.jpg" />

<div id="hotspot"></div> </div> </div>

CSS

The approach in CSS is to get the stage filling its area using absolute positioning. 

#stage { position:absolute; top:0px; bottom:38px; right:0px; left:0px; padding:0; background-color:Black; }

The imageHolder is also set to use absolute positioning and has its max-width and max-height set to the size/proportion we want, but the actual positioning will be done in JavaScript.

#imageHolder {
    position:absolute;
    max-height:720px;
    max-width:920px;     
}

And the image and placeholder are setup for absolute positioning.  The image is styled to fill the stage, and the hotspot is styled using percentages for position and size so that it will scale with the image:

#imageHolder img { position:absolute; top:0px; left:0px; min-height:100%; width:100%; height:auto; } #imageHolder #hotspot { position:absolute; cursor:pointer;

top:22.1%;

left:50.5%;

width:44%;height:42.3% }

JavaScript

We create a resize function that will recompute how big the imageHolder should be and where it should be placed.

function resize() {
    //Get stage size (less any desired padding)
    var stage = $('#stage');
    var div = $('#imageHolder');
    var newHeight = stage.height() - 10;
    var newWidth = stage.width() - 10;
    

    //Constrain to proportioon
    var proportion = parseInt(div.css('max-height')) / parseInt(div.css('max-width'));
    if (newWidth > newHeight / proportion) {
        newWidth = newHeight / proportion;
    }
    if (newHeight > newWidth * proportion) {
        newHeight = newWidth * proportion;
    }

    //Set the height and width -- the max-height/width will contrain this
    div.width(newWidth);
    div.height(newHeight);

    //Center it
    div.css({
        "left": (stage.width() - div.width()) / 2 + "px",
        "top": (stage.height() - div.height()) / 2 + "px"
    });
}

And then when we load the page we just need to call the resize function and setup the window’s resize event to call it as well.

$(document).ready(function () { $(window).resize(function () { resize(); });

 

resize(); });

See it in Action

You can see this in action on JSFiddle at http://jsfiddle.net/tYY87/  (I just made a few changes there for the smaller screen size.)

Super Simple SQL Server Express Backup to Amazon S3

There are lots of robust backup solutions out there, each with varying costs and sophistication.  They are great and I won’t claim that this post is better than any of them.  But in my case I simply wanted a cheap nightly backup of a database that could be stored in my Amazon S3 cloud.  With a little scripting I was able to do it for just the tiny price of the transfers to and storage in S3.

1. Created an Amazon S3 Account and create a bucket for your backups.  (I needed to look up my access keys in the Accounts section while I was there)

2. On the server, created a folder for my backup files and scripts (e.g. c:\backups)

3. Downloaded “S3copy Amazon S3 Command Line Copy” from http://download.cnet.com/S3copy-Amazon-S3-Command-Line-Copy/3000-2242_4-10915715.html?tag=mncol.  This is a simple, free EXE file (s3copy.exe) that allows you to upload a file to S3 from the command line.  I put it in my c:\backups folder.

4. Create a SQL script to backup the database, named backup.sql.  I wanted a fresh, full backup each time so my script was simply: 

BACKUP DATABASE [MyDatabase] TO  DISK = N’C:\Backups\MyDatabase.bak’ WITH FORMAT, INIT,  NAME = N’MyDatabase-Full Database Backup’, SKIP, NOREWIND, NOUNLOAD,  STATS = 10

5. Create a batch file (BackupDB.bat) that will call SQLCMD to run this script and then use s3copy.exe to upload it:

REM — Perform database backup
sqlcmd -S .\SQLEXPRESS –U <user> –P <password> -i "c:\Backups\Backup.sql"

REM — Copy to S3
c:\backups\s3copy.exe c:\backups\ <bucketname> MyDatabase.bak <accesskey> <secretkey>

6.  I then used Task Scheduler to create a nightly job that runs BackupDB.bat.

Yes, readers, this has all sorts of flaws.  It has no error checking, it doesn’t store multiple generations, it’s storing keys in the open, etc.  I will be fixing all that.  But this gives you the basic framework for how a little creative scripting can get you a low cost, easy solution.

Couple of iPad/iPhone web design links

Designer Michael Critz did a nice page showing all the fonts supported by Mobile Safari.  Since the @font-face tag only supports SVG fonts (with some limitations as documented here, it’s best to use these whenever possible:

http://www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/

Also, Yummygum just posted hundreds of free icons for iPad:

http://iconsweets2.com/