Hack to make vipers-video-quicktags detect iPad and use HTML5 Video Tag

I use this WordPress plugin, vipers-video-quicktag, in a couple sites I maintain. I use it to display FLV video. I’ve found if I create .mp4 videos with the H.262 video and AAC audio codecs, it’ll play in the Flash player, as well as on iPhone, iPad and iPod. This is neat, a single video format that works on all 3.

Problem is, with vipers-video-quicktag, it doesn’t detect iPhone/iPod/iPad on the Flash video option and just tries to display it with the Flash player, which we all know doesn’t work on iPhone/iPod/iPad.

The trick is to detect iPhone/iPod/iPad and instead of putting in the Flash video, instead put in a HTML5 Video tag.

WordPress: http://wordpress.org/extend/plugins/vipers-video-quicktags/
Author’s Page: http://www.viper007bond.com/wordpress-plugins/vipers-video-quicktags/

If you know how to read a diff file, here’s how I hacked it in. Remember, this is only going to work universally, if your videos are .mp4 with H.264/AAC encoding.

# diff -Naur vipers-video-quicktags.php.orig vipers-video-quicktags.php
--- vipers-video-quicktags.php.orig     2010-05-23 22:15:11.000000000 -0700
+++ vipers-video-quicktags.php  2010-05-23 22:19:22.000000000 -0700
@@ -3663,7 +3663,9 @@
                //$content .= "// <![CDATA[\n";

                foreach ( $this->swfobjects as $objectid => $embed ) {
-                       $content .= '   swfobject.embedSWF("' . htmlspecialchars( $embed['url'] ) . '", "' . $objectid . '", "' . $embed['width'] . '", "' . $embed['height'] . '", "9", vvqexpressinstall, ';
+# dkhack, replace this line with HTML5 Video tag when it's iPhone, iPad, iPod:
+                       # $content .= ' swfobject.embedSWF("' . htmlspecialchars( $embed['url'] ) . '", "' . $objectid . '", "' . $embed['width'] . '", "' . $embed['height'] . '", "9", vvqexpressinstall, ';
+                       $content .= 'if ((navigator.userAgent.indexOf(\'iPhone\') != -1) || (navigator.userAgent.indexOf(\'iPod\') != -1) || (navigator.userAgent.indexOf(\'iPad\') != -1)) document.getElementById("'.$objectid.'").innerHTML = \'<video width="'.$embed['width'] .'" height="'.$embed['height'].'" poster="'.preg_replace("/\.[^\.]{3}$/", ".jpg",  $embed['flashvars']['file']).'" src="'. $embed['flashvars']['file'].'" controls />\'; else  swfobject.embedSWF("' . htmlspecialchars( $embed['url'] ) . '", "' . $objectid . '", "' . $embed['width'] . '", "' . $embed['height'] . '", "9", vvqexpressinstall, ';

                        if ( empty($embed['flashvars']) || !is_array($embed['flashvars']) ) {
                                $content .= 'vvqflashvars';

Basically, what it’s doing is detecting iPhone/iPod/iPad in JavaScript and writing this:

<video width="'710" height="400" poster="http://host.tld/path/to/video.jpg" src="http://host.tld/path/to/video.mp4" controls />

One more thing to note…. When I tested this with my iPad, it didn’t work at first. Something is wrong with the iPad – it doesn’t want to see the movie when it’s at it’s default location in WordPress after upload. Is there a 300 level redirect in there somewhere that iPad doesn’t like? Maybe something with .htaccess. Workaround: What fixed it for me was creating a new directory in my DOCUMENT_ROOT called “videos” and then I put symlinks in there to the physical files, and then used these http://host.tld/videos/my_video.mp4 URLs and it works fine.

Dave.