Posts Tagged ‘iPad’

|

HTML 5 Video with Flash Fallback

Thursday, July 15th, 2010

HTML5 has some exciting new changes, most notably tags for embedding audio and video. Currently not all browsers will fully support these tags, but with the ability to fallback on different formats until one that works for your browser you can start using them today. The greatest benefit of using HTML5 video tags right now is its compatibility across multiple devices, notably mobile devices. The majority of mobile devices, including the iPad and iPhone, are currently unable to run flash based players. Adding the video tag allows these browsers to play your videos with their built in controls, expanding your potential audience.

Video Formats

The first item to look at when setting up the video tag is your video formats. Web browsers don’t currently agree on which video format should be the leader for the web so to support them all we’re currently stuck providing video in multiple formats. The two most common formats right now are H.264 (typically .mp4) and Theora (typically .ogv). H.264 is great format and common across the web as YouTube and the iTunes store both use it, but has a disadvantage in that MPEG LA owns the patent to the format and could potentially charge to encode videos in the future. Theora has the benefit of being royalty-free, but isn’t currently as widely used or integrated into as many tools. Currently Firefox and Opera only support Theora, while Safari (iPhone & iPad), Android, and Flash only support H.264. Internet Explorer is behind in supporting the video tag, which makes the ability to fallback to a Flash based player very useful.

Encoding Video

To encode .ogg files I’ve used Firefogg, which is a plugin for Firefox. This tool makes it very simple to create ogg files (for batch encoding try ffmpeg2theora). Simply install the plugin and then in FireFox go to the “Tools” menu and select “Make Web Video”. From there select a file that you’ll convert and if you want you can change the output settings for quality or video size. Make sure to leave the default video and audio codecs of Theora and Vorbis both set.

To encode h.264 files I recommend HandBreak. To get started open the video file you want to convert. Choose the iPhone & iPod Touch Default settings in the right menu (window > presets drawer if its not up). Next you’ll want to set the dimensions of your video (Picture tab on PC / Window > Picture Settings on mac). Choose either a specific size you want or change it to match the source settings (as they have changed to a size specific to the iPhone). Check the “Web Optimized” box and in the video you can adjust the quality if necessary to keep your file small. If your video has audio click on that tab and change the setting to “AAC (faac)”. Now you’re ready to encode, either click start or add to queue and repeat this process with another video.

handbreak

Setting up the Video Tag

If you got all the conversions done correctly, now is the easy part. Simply add a video tag with the height and width of your video. Adding “controls” to the tag will allow the user to pause/play the video and adjust the volume (other options for the video tag include preload, loop and autoplay). Then list the source location of the videos you created above in the order you want browsers to attempt to play them. If they are unable to play the first file they will continue to the next one.

<video width="710" height="400" controls>
     <source src="video_file.mp4" type="video/mp4" />
     <source src="video_file.ogv" type="video/ogg" />
</video>

Tips: The iPhone currently reads only the first video source so you’ll want your mp4 file listed first. If you’re maintaining your own server you’ll want to make sure you have these MIME types added: video/ogg .ogv & video/mp4 .mp4.

Falling back to Flash

The next step to cover yourself for old browsers and the always behind Internet Explorer is adding a Flash Player to the end of the video tag. The nice thing is this will work just like it did for the video files, if the first two don’t work it’ll move right on to the Flash. You can add in whichever Flash player you’d like to use, but my preferred player is the JWPlayer, so thats what I’ll be using.

<video width="710" height="400" controls>
     <source src="video.mp4" type="video/mp4" />
     <source src="video.ogv" type="video/ogg" />

     <object width="710" height="424" type="application/x-shockwave-flash"
     data="js/player.swf?image=image.jpg&file=video.mp4">
       <param name="movie" value="js/player-licensed.swf?image=image.jpg&file=video.mp4" />
     </object>
</video>

That’s all there is to setting up an html 5 video tag. Here’s a sample:

Related Links

Here’s a few projects and informational sites to check out for html video:

Tags: , , , ,
Posted in HTML | No Comments »

DODOcase Review

Sunday, June 20th, 2010

dodo case

When I pre-ordered my iPad I also ordered Apple’s case which I used on and off for about two months. The Apple case has great utility (angle for typing & stand for watching) and fits the iPad very well, but I would often take the case off when I was reading because it just didn’t feel as good to hold as the iPad by itself. I hadn’t seen anything out there that was worth replacing my Apple case… until I saw the DODOcase.

The DODOcase cost $50 and, like they say on their website, took about 6 weeks to ship. The case is hand-constructed and currently there is a high-demand, thus the extra long wait. It was worth waiting. The case is absolutely beautifully made. Inside the case is a frame, made from carved bamboo, that supports the iPad along with some corner pieces which shape to accommodate the device. The iPad fits perfectly in the case, but while it stays there just fine, I wouldn’t expect it to stay put with any vigorous shaking while upside-down. The cover secures with an elastic strap to prevent any iPad casualties.

The only issue I’ve found with the case has been that a couple of the rubber tabs holding the corners in place have separated from their adhesive on the top of the bamboo frame. I ended up using this to my advantage and folded those tabs underneath the iPad to make it fit in the case more securely. Now it won’t fall out even if I hold it upside-down. The other thing to be aware of is that this case doesn’t sit at as high of an angle as the Apple case, making it more difficult to type on. I say, “to be aware of” as I can’t really fault them for the angle as making the binding thicker would definitely lower the aesthetic appeal of the case. The DODOcase does stand up like Apple’s case if you have a flat surface and balance it using the cover.

Overall, the DODOcase is awesome.  I really love having a great looking case for such an amazing device and when its closed it looks like you’re just carrying around a Moleskine. The familiar feeling of caring this around makes me think that if Apple (or someone else) can come up with a fine-tipped stylus and an app with great handwriting recognition it could, for many applications, replace carrying a paper notebook.

Tags: ,
Posted in Gear | No Comments »