OSMF Flash Video Player for WordPress

Trying out this WordPress Plugin:
Flash Media Playback

Up till now, I’ve used the Viper’s Video Quicktags, which has served me well to date, and is great b/c it allows you to embed a variety of videos like YouTube, Vimeo, Flickr and a bunch more. The problem with Viper’s is the Flash option uses the jwplayer, which comes with some restrictions like non-commercial use only.

So, I think the perfect combo of WordPress video plugins is Flash Media Playback for Flash with HTML5 fallback, and Viper’s Video Quicktags for YouTube, Vimeo, etc (i.e. everything else). Read on to see the examples:

Read more

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.

Make a Poster JPG for each MP4

Nifty command to take a list of MP4 videos and make a poster JPG for each one:

for i in `ls *.mp4`; do echo $i; j=`echo $i | sed -e 's/.mp4/.jpg/'`; echo $j; ffmpeg -i $i -r 1 -f image2 -t 1 $j; done

This takes each mp4 video in a directory and creates a .jpg for it. In the ffmpeg command, the -r 1 means 1 frame per second, and the -t 1 means stop after 1 second. The -f image2 means the output is an image.

This is useful when you have a bunch of videos to upload to say WordPress for use with, oh say, vipers-video-quicktags plugin that automatically looks for a file with the same name, but a .jpg extension, for the poster. In case it’s not obvious, the poster is the image that displays on a video before play.

iPad HTML5 Video tag with div overlay with form not working

If you have a page that detects browser and feeds up the Flash version for browsers that’ll accept it and the HTML5 version for those that will take that, you may have noticed that trying to display a DIV over the top of the video renders that <form> inside to not work on the iPad. It’s like the Video tag is a black hole for user input.

One workaround is to change the visibility of the video tag to hidden”

<script language="javascript">
function toggleDivFlagForm() {
  if ( document.getElementById('divFlagForm').style.display == 'none' )
  {
     document.getElementById('divFlagForm').style.display = 'inline';
    document.getElementById('dVideo').style.display = 'none';
  }
  else
  {
     document.getElementById('divFlagForm').style.display = 'none';
    document.getElementById('dVideo').style.display = 'inline';
  }
}
</script>

http://www.koopman.me/test2.html

<html>
<head><title>Video test</title>
<script language="javascript">
function toggleDivFlagForm() {
  if ( document.getElementById('divFlagForm').style.display == 'none' )
  {
     document.getElementById('divFlagForm').style.display = 'inline';
    document.getElementById('dVideo').style.display = 'none';
  }
  else
  {
     document.getElementById('divFlagForm').style.display = 'none';
    document.getElementById('dVideo').style.display = 'inline';
  }
}
</script>
</head>
<body>

<a href="#" onClick="toggleDivFlagForm(); return false;">Toggle Form</a><br />

<div id="divFlagForm" style="position:absolute; left:100px; top:100px; display:none; ">
<form method="GET">
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" value="Submit" />
</form>
</div>

<div id="dVideo">
<object style="visibility: visible;" id="flashcontent1273" data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" height="390" width="584">
<param value="true" name="allowfullscreen">
<param value="always" name="allowscriptaccess">
<param value="src=http%3A%2F%2Fcache.nebula.phx3.secureserver.net%2Fobj%2FNDEyMkYyRDk1MEM3MENBN0FFRDM6YTE5MTgwMThlMGQ0OTEwY2RmOGUwZjMxZWM3NjA4ZTM%3D&amp;controlBarMode=docked&amp;controlBarAutoHide=false&amp;poster=http://www.koopman.me/wp-content/uploads/2011/01/OFF_Drop_VidScreen.jpg&amp;playButtonOverlay=true&amp;loop=false&amp;autoPlay=false&amp;streamType=liveOrRecorded&amp;scaleMode=letterbox" name="flashvars">
</object>
</div>

<script language="javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) 
        document.getElementById("dVideo").innerHTML = '<video width="584" height="390" poster="http://www.koopman.me/wp-content/uploads/2011/01/OFF_Drop_VidScreen.jpg" src="http://cache.nebula.phx3.secureserver.net/obj/NDEyMkYyRDk1MEM3MENBN0FFRDM6YTE5MTgwMThlMGQ0OTEwY2RmOGUwZjMxZWM3NjA4ZTM" controls />'; 
</script>

</body>
</html>

Video Encoding for Dummies

I have a set of .wmv files, about 12 totaling about 8 hours, that were made with Microsoft Windows Media Encoder in “Capture Screen” mode. This uses a proprietary Microsoft codec called MSS2. It’s optimized for screen capture and does a really good job with compression and displays in high quality on Windows Media Player. The problem is, nothing else in the world can read them. At least very few things. If you read on, this is my story of how I got it to work.

My goal is to make these .flv files so they can be displayed in a Flash player on a web page. I want to display them 800×600 and have the quality fairly decent, but not too big either. Can’t be larger than 100 MB per hour.

First I struggled with ffmpegx built for Mac. I downloaded a pre-compiled nifty little package. It was free, based on the open source command line ffmpeg, which is great most of the time. ffmpegx can do conversions, it’s a nifty little GUI front for the command line. It was neat, because I could play with the options in the GUI, and it would show me the command it used, which taught me how to use the command line version! But, it could not read my .wmv files made with the MSS2 codec.

Note: When I started this journey, all I knew is that I had .wmv files. I didn’t realize that .wmv is nothing more than a container representing a whole slew of video codecs from Microsoft. When I ran ffmpeg on the command line, here’s what it did that made me realize it was made with the MSS2 codec:

s1mait-dkoop:PST dkoopman$ ffmpeg -i per.wmv -b 500k -r 12 -ar 22050 -ab 48k -vol 8192 -f flv per.flv
FFmpeg version SVN-r22094, Copyright (c) 2000-2010 the FFmpeg developers
  built on Feb 27 2010 10:06:19 with gcc 4.2.1 (Apple Inc. build 5659)
  configuration: --enable-libmp3lame --enable-shared --disable-mmx --arch=x86_64 --enable-libfaac --enable-libfaad --enable-libx264 --enable-gpl --enable-nonfree
  libavutil     50. 9. 0 / 50. 9. 0
  libavcodec    52.55. 0 / 52.55. 0
  libavformat   52.54. 0 / 52.54. 0
  libavdevice   52. 2. 0 / 52. 2. 0
  libswscale     0.10. 0 /  0.10. 0
[asf @ 0x10100b000]max_analyze_duration reached
Input #0, asf, from 'per.wmv':
  Metadata:
    title           : Perf
    author          : DaveK
    copyright       : 2010
    comment         : 
    WMFSDKVersion   : 11.0.5721.5265
    WMFSDKNeeded    : 0.0.0.0000
    IsVBR           : 0
  Duration: 00:11:39.63, start: 3.000000, bitrate: 91 kb/s
    Stream #0.0(eng): Audio: wmav2, 44100 Hz, 1 channels, s16, 32 kb/s
    Stream #0.1(eng): Video: MSS2 / 0x3253534D, 803x600, 250 kb/s, 1k tbr, 1k tbn, 1k tbc
swScaler: Unknown format is not supported as input pixel format
Cannot get resampling context

Notice the line three up from the bottom: Stream #0.1(eng): Video: MSS2 / 0x3253534D, 803×600, 250 kb/s, 1k tbr, 1k tbn, 1k tbc

Searching on MSS2, I found this page http://www.mplayerhq.hu/DOCS/codecs-status.html that confirmed that MSS2 is Windows Media Screen Codec. Made me realize that Windows Media Encoder uses a special codec for screen capture.

mencode
Next up, I tried mencoder from mplayer, thinking it has the codec listed on it’s codecs-status page, it’ll probably work. Here’s the output from that:

s1mait-dkoop:PST dkoopman$ mencoder per.wmv -ofps 12 -oac mp3lame -ovc lavc -lavcopts vcodec=mpeg4 -o per.avi
MEncoder SVN-r30531-snapshot-4.2.1 (C) 2000-2010 MPlayer Team
success: format: 0  data: 0x0 - 0x7a028c
ASF file format detected.
[asfheader] Audio stream found, -aid 1
[asfheader] Video stream found, -vid 2
VIDEO:  [MSS2]  803x600  24bpp  1000.000 fps  250.0 kbps (30.5 kbyte/s)
[V] filefmt:6  fourcc:0x3253534D  size:803x600  fps:1000.000  ftime:=0.0010
==========================================================================
Opening audio decoder: [ffmpeg] FFmpeg/libavcodec audio decoders
AUDIO: 44100 Hz, 1 ch, s16le, 32.0 kbit/4.54% (ratio: 4006->88200)
Selected audio codec: [ffwmav2] afm: ffmpeg (DivX audio v2 (FFmpeg))
==========================================================================
Opening video filter: [expand osd=1]
Expand: -1 x -1, -1 ; -1, osd: 1, aspect: 0.000000, round: 1
==========================================================================
Requested video codec family [wmsdmod] (vfm=dmo) not available.
Enable it at compilation.
Requested video codec family [wms10dmod] (vfm=dmo) not available.
Enable it at compilation.
Cannot find codec matching selected -vo and video format 0x3253534D.
==========================================================================

Notice: wmsdmod and wms10dmod are on the page http://www.mplayerhq.hu/DOCS/codecs-status.html listed as .dll. I could not for the life of me figure out how to enable this as compile time. It’s not an option in ./configure –help and can’t find it online with Google searches.

Flip4Mac
I installed Flip4Mac WMV Studio Pro, purchased for $99, because I read online I needed this to decode .wmv files. I figured that’s Microsoft for you, but it was worth it to me to spend some cash to be able to complete this task. Even after installation, I still cannot read these .wmv files encoded with MSS2. I can now view other .wmv files with QuickTime Pro, though.

ON2’s Flix Standard for Mac
I purchased this for $39 I think, because I discovered on this journey that ON2 is the one that invented the VP6 video that’s the defacto standard for Flash video on the web today. I’m thinking, get the “convert to flv” tool from the ones that invented flv, right!? Wrong. Well, it does a good job converting other files to flv, but it can’t read my .wmv files encoded with MSS2.

Windows Movie Maker
Have to be on a PC for this. Didn’t really want to, but I’m starting to crack. I’m starting to realize that no matter how bad I want to crack this nut on my Mac, it probably isn’t going to happen. On my PC, I can import my .wmv files encoded with MSS2 into Windows Movie Maker, then I can “Save Movie” and it saves as a .wmv file encoded with WMV3.

Ok, now how do I make a flv file out of it? Well, I already purchased ON2’s Flix Standard, and it can read the .wmv files encoded with WMV3. But, so can ffmpeg and mencoder, which are free! Ug, I’m irritated that I spent money when I didn’t need to.

Here’s the thing, though. Windows Movie Maker is a pain to use, it’s crashes on big files, and takes a long time to encode. And my process sucks. I have to download to PC, do conversion with Movie Make, transfer to Mac to finish the job. Yuck.

Movavi Video Converter for Mac
Didn’t buy this one, just downloaded the trial. Same problem, can read the .wmv files encoded with MSS2.

Movavi Video Converter for Windows
Located at http://www.movavi.com/videoconverter/ this program does the trick. I can read the .wmv files encoded with MSS2 and convert them straight to .flv with the H264 system. H264 is supposed to be the next best thing compared to VP6. For my case, it fit the bill perfectly. For example, one set of about 6 files over 3 hours of video came to about 140 MB total, and the quality was good. By good I mean can read the text on the screen, not grainy or blurry. These screen captures are moving from one web page to another with narration, not super animation.

Yes, I have to do this on my PC, but it works, one tool to do the conversion. This is what I needed to get through it.

DaveK.