HomeBlogHTML5 Video on TravelShark for a Better Experience

TravelShark HTML5 Videos Work on Desktop, Mobile Without Flash

Published June 16, 2011

At RustyBrick I recently had the pleasure of working with TravelShark (formerly Swiftrank) to launch a new website for their featured hotel program. They won't hesitate to let you know about their network of 12,000+ region targeted hotel booking websites for cities all over the globe, which you can learn all about by visiting their site. Here I'd like to talk about two technical features of the site.

Interactive Home Page Hover Map

This jQuery (JavaScript) powered widget consists of an HTML <map> with polygonal <area>s -- a callback to the old days of the web but enhanced and made cross-browser compatible with jQuery. On hovering over the different parts, the background map image changes to highlight a section. 


Interactive world map

HTML5 Video Elements

For a faster load time and (ironically) higher compatibility across devices I went with VideoJS to load in the appropriate video content depending on the client's browser. I say "ironically" because one would think HTML5 video would result in fewer compatible devices but in fact HTML5 video, if done correctly, plays on iOS (i.e. Apple iPhone) and Android devices. Flash-based video does not play at all on iOS and may be clunky and battery draining on Android. Of course all modern desktop browsers, including IE9, play the HTML5 video tag without a problem. Any unsupported browser falls back to a Flash based player and, failing that, a download link is displayed.


HTML5 Video in a pop up modal dialog box.

The downside to using HTML5 video is that the browser companies cannot decide on which video format to support! As of June 2011:

  • Firefox supports Ogg Theora (since 3.5+) and WebM (since 4.0+)
  • Google Chrome supports Ogg Theora, WebM, and H.264 (but will be removing H.264 "soon")
  • Safari/IE 9.0 only support H.264!

<rant>Of course Microsoft kicks the open source video codecs to the side, but c'mon, Apple?</rant>   I now realize you can cover all browsers with Ogg Theora and H.264 but I also converted into WebM anyway just in case. Using ffmpeg and MP4Box free (GPL) utilities, the TravelShark Tour video was converted into the three formats and plugged in to the VideoJS code.

To see it in use, click the WATCH TOUR VIDEO button on the TravelShark home page. Go ahead, try it on your smartphone or magicpad! **Spoiler alert!** It just works.

Postscript

TravelShark also posted some funny YouTube videos about their name change. Check them out.

blog comments powered by Disqus

1 COMMENT

Michael Butler

Michael joined the RustyBrick team in 2008 to focus on transitioning existing web sites to new & enhanced platforms. He graduated from Rutgers University in 2005 and holds a B.S. in Computer Science.

This article is under Creative, PHP Programming, Web Programming

There is 1 comment for this post

Connect With Us

Send Us a Message

Do you wish to give us feedback on one of our apps, send us a message or explore a proposal? Fill out the form below and we'll get back to you pronto!

Visit Us

250 West Nyack Road, Suite #200 West Nyack, NY 10994
Get Directions

Call Us Toll Free

877-GO-RUSTY
877-467-8789

Telephone

845-369-6869

Fax

845-228-8177