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!

Advertisements

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