Ready for some action and adventure yourself? We support the idea—get out and have as much fun as you can squeeze in...and while you’re at it—record a bit of it. Then, if you want to, you can use Sandvox to share your videos quickly and easily—like Pete does, on his Sandvox-built website spotlighted in the previous article.
Putting videos on a Sandvox website is easy and straightforward. The thinking is in the setup.
To make sure as many visitors as possible can easily view your videos, read this quick article reviewing video file formats and preparation for posting.
Background
Video on the web has evolved over several parallel tracks. Apple’s QuickTime has been around for years, and it is a nice format to use as long as your visitor is using a Mac. If your visitor is on another platform, though, they might not see it if they don’t already have the QuickTime for Windows browser plug-in installed. This is not something you can always count on.
There are some video formats, that are popular on Windows like .avi and .wmv, that are great for visitors running Windows—but necessarily for visitors who use Macs. Mac users who want to play .avi or .wmv format files would need a browser plug-in like Flip4Mac to be able to see them.
For awhile, Adobe’s Flash format seemed to cover the broad middle quite well, when Flash videos were embedded into websites—users of both platforms could reasonably be expected to have Flash plug-ins for their browsers installed. These days, Macs don’t even come with Flash—and it isn’t the right choice for a large new group of potential viewers or visitors who may be using iPhones or iPads, since Flash doesn’t work on those devices. So what to do now....
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, and works for both Macs and PCs, as well as iOS devices (like iPhones and iPads). Sounds great, right? Well, there’s still one problem to solve: 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, you need a workaround to play videos in those browsers.
On top of that challenge, you probably 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 the most modern browsers.
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 older versions of Internet Explorer, a Flash player will be used to play your video. This hybrid approach 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 is possible to export a movie to an MPEG-4 file that won’t play on an iPhone or iPad. So you want to make sure you specify the correct options, and that you test it yourself if possible. (Unfortunately, to our knowledge, 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 the movie file into iTunes, if it’s not already listed in your iTunes library. Select the movie and then go to the File menu and choose “Create iPad or Apple TV Version” (or “Create iPod or iPhone Version” for smaller-sized movies).
Sandvox Does the Hard Work Automatically
Once you have exported your video into this format, Sandvox can handle the task of making your video viewable by 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 size you want it to appear at on your web page. If you don’t, the video will be viewable, but it will take longer to load than is necessary.
Don’t worry too much Retina display when thinking about video resolutions. While images that haven’t been optimized for Retina displays might look a bit blurry on Apple’s latest display offerings, video doesn’t suffer anywhere near as much. Certainly you are welcome to experiment with providing a high-resolution movie, but you should make sure that the increase in quality is worth the additional bandwidth.
* * *
We’ll look forward to seeing your work if you decide to submit your Sandvox site to SandvoxSites.com!