This morning as I was going through my overnight email, I saw a notice that "koansin" was now following me on Twitter. I'm not a big Twitter user, and usually I make a cursory look to make sure the follower isn't a spammer, but I don't always follow back. I know this may not be Twitter etiquette, but I use Twitter as a research tool and get easily overwhelmed with too much information.
But, I've been experimenting with Twitter tools that automatically follow people who follow me and I happened to visit koansin's stream. It said an amazing thing:

I have experimented a fair bit with video on iBooks and hadn't been able to make it work. Who would have thought the solution was to just believe in HTML5 and use the proper format!? And it does work.
Here's what I learned. Here's a direct link to the video on my own site until YouTube finishes processing it.
And here are the highpoints, I promise I'm going to work on improving my screencasting, now that I'll be able to add screencasts to my books!
- Begin your html document with this header:
<html xmlns="http://www.w3.org/1999/xhtml">. The ePub format requires XHTML 1.1, but iBooks accepts your code even if you use HTML5. - Where you want your video to appear, begin the video element, by typing
<video - The most important attribute is src, which gives the location of your video. The video should be in .m4v format or .3gp format. If your video isn't in one of these formats already, open it in QuickTime, and choose Save for Web, and then choose the desired format. The .m4v format is higher quality and looks beautiful in the iPad. The .3gp format is for cellphones. In this example, I used
src="html5video.m4v". - Unless you plan to build the controls for your Video player, you should add
controls="true"so that your reader can play, rewind, change the volume, and view the video full screen. - The default proportions for a video object in iBooks appear to be for widescreen. If you have a 4:3 video (say, 640 x 480), you can enter a width and height that are proportionate to your video to avoid having black bars on either side. I use
width="320" height="240". - Finally, there seems to be a little bug in the autoplay function. It seems like the default behavior is that movies do not play automatically, which is good. However, I've found that after viewing a book and then adding a new book, the old book's video starts playing on its own, even if you close it!! If you add
autoplay="false", that won't happen. I recommend it. - Finish the opening
videoelement with a greater than sign: >. - I haven't tested what happens if the video doesn't work, but theoretically what you insert between the opening and closing video tags is what will appear. YMMV.
- Finally, add the closing
</video>tag.

The moral of the story? Always follow back on Twitter! Thanks, Koan-Sin Tan. Sometimes you just have to know that something is possible in order to figure out how to do it. I'll continue testing and be sure to let you know what else I find out.

97 comments: