Appending HTML5 Video tags with jQuery

I just found an interesting jQuery bug. I was creating a <video> tag via jQuery, including the src attribute, and appending it to my container, like this:

$("#videoWrapper").append($("<video id='myVideo' src='video1.mp4'  />"));

This worked and the video played fine, but when I was debugging in Fiddler I found it was actually downloading the video twice!   It must be activating the tag somehow during the append process.  That’s not so good for performance.

The fix was to add the src attribute afterwards:

$("#videoWrapper").append($("<video id='myVideo' />"));
$("#myVideo").attr('src', 'video1.mp4');

There are probably some other ways to address it as well, but this worked!

Preparing Video for HTTP Live Streaming

When playing video on an iPad or iPhone, you never know how good a connection you will have.  Are they on WiFi?  3G?  Worse?  And the quality of the connection could change in the middle.  How do you play video on a mobile website and have it automatically adjust the quality in response to the connection?  The answer is “HTTP Live Streaming”.

In HTTP Live Streaming, which unfortunately is only supported for Mobile and Desktop Safari (and native apps, I believe, but I’m focused on web right now), the video is broken into 10 seconds chunks that are then played like a playlist.  You can have multiple sets of these chunks at different qualities, and the browser automatically adjusts to pull the highest quality stream it currently can afford.  It’s pretty slick.

(image from Apple documentation)

There is a lot of good documentation out there, especially from Apple about how this works.  Check out https://developer.apple.com/resources/http-streaming/  I won’t attempt to recreate all of that, but I did have a few hiccups and workarounds when I did it, so I wanted to document my steps.

Continue reading

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!