February 2012
If you do not load images, you will not be able to see our fancy logo and screenshots below!

Greetings from Karelia Software!

Sandvox Tips: Choosing the Right Video Format

Video on page

You want to put videos onto your website. Maybe you have some short movies from your digital camera, or you’ve put together a more sophisticated presentation using iMovie or even Final Cut Pro.

Using Sandvox, putting video on your website is easy and straightforward — just drag the movie in and click “Publish.”

Oh, but wait — you want to make sure that your movie can be seen by other people, not just you? That takes a bit of setup. That’s what this issue of our newsletter is about — to help you get video files into a format that can be seen by nearly everybody.

Background

Video on the web has evolved over several parallel tracks. Apple’s QuickTime has been around for years, and it’s a nice format to use as long as your visitor is using a Mac. If your visitor is on Windows, though, they might see it only if they’ve already installed the QuickTime for Windows browser plug-in. Not something you can always count on.

Conversely, there are some Windows video formats, like .avi and .wmv, that are great for visitors running Windows but not always great for those using a Mac. They’d need a browser plug-in like Flip4Mac to be able to see those videos.

A solution that had worked well, at least up until recently, was to embed video in the browser using Adobe Flash. This worked on both Mac and Windows, and was generally already installed and ready to go in most browsers. But new Macs these days don’t even come with Flash.

And what if you want your video to be seen on an iPhone or an iPad? Flash doesn’t work on those devices, so it’s back to square one.

State of the Art

The latest browsers now include a modern way of embedding video, using the HTML5 <video> tag. This technique is cross-platform, working for both Mac and PC, as well as iOS (iPhone/iPad). Sounds great, right? But there’s still one problem: there is no universal video format that all browsers support. An MPEG-4, H.264-encoded, video that plays perfectly well on Safari, Internet Explorer 9, and iOS, will not play on Firefox or Chrome. So then you need a workaround just to play videos in those browsers.

On top of that challenge, you also want your video to be playable on older browsers, such as Internet Explorer 7 and 8. Wish as we might, many people have just not yet upgraded to a more modern browser.

Sandvox’s Hybrid Solution

Sandvox uses a technique that makes use of the modern <video> tag when possible, but also supports a Flash-based player as a fallback. If you can get your video into an iOS-compatible format (see below), then a Sandvox-built website will use the built-in player on browsers such as Safari and IE 9. This takes care of many browsers on the Mac, PC, and iOS. For viewers using Firefox or Chrome, or for older versions of Internet Explorer, a Flash player will be used to play your video. This covers more than 99 percent of possible visitors.

The Ideal Video Format

All of the background presented above distills down to one important concept: to achieve nearly universal visibility for your video, you need to export it to an iOS-compatible format. This format is MPEG-4, using an H.264 codec, with some additional settings as well.

Getting this configured just right can be a bit of a pain. It’s possible to export a movie to an MPEG-4 file that won’t play on the iPhone or iPad. So you want to make sure you are specifying the right options, and that you test it yourself if possible. (Unfortunately, Apple doesn’t provide a mechanism to verify if a movie will be playable on an iPhone or iPad — you just have to check it yourself.)

Exporting Video

The best way to get your movie converted to the appropriate iOS-compatible format is to export it directly from the tool that you used to create the movie.

In iMovie, for instance, just choose “Export Movieā€¦” from the Share menu. Note from the options dialog that appears that the format will be iPhone- and iPad-compatible. The file will be exported with a “.m4v” extension.

If your movie was created elsewhere, here is an easy way to export it to the right format. First drag your movie file into iTunes, if it’s not listed in your iTunes library already. Select your movie and then choose “Create iPad or Apple TV Version” (or “Create iPhone version” for smaller-sized movies) from the Advanced menu.

Sandvox Does the Hard Work Automatically

Once you have exported your video into this format, then Sandvox handles the task of making your video visible to just about everybody. There’s nothing to configure. Just drag the video into your page, and click Publish!

A Note about Sizes

Sandvox handles resizing and resampling of images, but not movies. With an image, you can resize it and Sandvox will regenerate an image that is exactly the same size that you see on the screen and upload it to your web server. A video, being a much more complex file, does not get handled the same way. If you enlarge or shrink a video, Sandvox does not modify the original file. So if you wish to present your movie at a smaller size than the source video, it is probably a good idea for you to re-export your movie in a size that matches the visible size on your web page. If you don’t, the video will be viewable, but it will take longer to load than is necessary.

Application Downloads

Download iconSandvox 2.5.2

MacAppStore iconSandvox 2.5.2

MacAppStore iconiMedia Browser 2.0.1

Other Downloads

(Only for our newsletter subscribers)

Download bonus book “77 Ways to Get Traffic” eBook

Sandvox Sites Directory

Examples of Sandvox-Built Websites contributed by people like you

On Social Networks

Twitter: Follow @karelia

Facebook:
Become a fan of Karelia and join our Sandvox Group

See you in the Sandvox!