While composing my previous post, I wanted to add a video to show the animation that I’m mention, so I decided to capture screen shots to show it on my post.
Lucky enough OS X came with many useful apps that most people might not aware about them, and download third party apps for the exact functionality. To capture the screen (in video), I use Quicktime’s screen recording function to capture iPhone Simulator and output as .mov file, then use a nice little free convertor called Adapter, to convert into flv, and was looking for WordPress plugin to post a video since then.
I have came across few, like Stream Video Player and JW Player, they both offer simple video browser to pick from my upload library, and generate the video player, but it keeps saying permission error when it plays, even though I already set permission 777 on uploads and plugin folder, no luck.
Then I remembered the HTML5 video, and the Gizmodo post, I decided to leave legacy browser behind, namely the IE 6 – 8, and go for HTML5 video. So I convert the mov file into mp4 and ogv, mainly because not all browser plays the same format as shown here. With a simple <video> with multiple source for supported browser to download.
Here is the markup I used:
<video controls="controls" height="240" width="480">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogv" type="video/ogg" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="240" width="480">
<param name="src" value="/media/moxieplayer.swf" />
<param name="flashvars" value="url=/wp-admin/movie.mp4&poster=/wp-admin/" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
<embed allowfullscreen="true" allowscriptaccess="true" flashvars="url=/movie.mp4&poster=/" height="240" src="media/moxieplayer.swf" type="application/x-shockwave-flash" width="480" />
</object>
</video>
It just that simple, it work nicely on Chrome, Safari and Firefox, but on mobile safari, there will be a big play button that suppose showing at the center but it didn’t, and the preview image is clipped, but it plays well.
I guess the width in the <video> is too large for mobile screen, so the mobile browser just clipped the preview image, since in iOS it going to play in apps anyway. I suppose there are JavaScripts library or some responsive styling will fix it, but it’s not a show stopper for me at the moment and I’m doing a quick posting, might look into it in the future though.