A while back I needed to program a page flip effect in Silverlight, and Rick Barraza had an incredibly thorough blog post with lots of examples and great visuals. Now he has done it again, this time for HTML5 Canvas:
The Secret to the Page Flip in HTML5/Canvas for Windows8 and iOS | rbarraza.com.
Unfortunately I can’t seem find the old Silverlight blog post or I’d post that too.
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' />"));
There are probably some other ways to address it as well, but this worked!
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.
As 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 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.
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).