<script src=”__path to your media player__/swfobject.js” type=”text/javascript”></script>
<div id=”__this script id__” style=”margin: 3px; padding: 3px; text-align: center; float: left; width: 560px;”>
<font size=”3″ color=”#000100″ face=”verdana” style=”background-color:#FFFFFF”><b><strong>
PLAY <a href=”__path to your video image__.mp4″>Apple iTunes MP4</a> OR <a href=”__path to your video image__.ogv”>OPEN FORMAT VIDEO</strong></a>
</b></font></div>
<br clear=”all”>

<script type=”text/javascript”>// <![CDATA[
var sd = new SWFObject('__path to your media player__/mediaplayer.swf','mpl','560','402','8');
sd.addParam('allowscriptaccess','always');
sd.addParam('allowfullscreen','true');
sd.addVariable('height','402');
sd.addVariable('width','560');
sd.addVariable('image','__path to your video poster image__.jpg.jpg');
sd.addVariable('file','__path to your video image__.flv');
sd.write('__this script id__');
// ]]></script>

One can add a little extra wrinkle, and put those links over a fall back image.  This is done by making the image the background in a table.  In both cases, I highlight the links with a background color of white to assure legibility against potentially busy backgrounds.

<script src=”__path to your media player__/swfobject.js” type=”text/javascript”></script>
<div id=”__this script id__” style=”margin: 3px; padding: 3px; text-align: center; float: left; width: 560px;”>
<table cellpadding=”7″ cellspacing=”0″ border=”0″ background=”__path to your fallback image__.jpg” width=”560″ height=”402″>
<tr><td align=”center” valign=”bottom”>
<font size=”3″ color=”#000100″ face=”verdana” style=”background-color:#FFFFFF”><b><strong>
PLAY <a href=”__path to your video image__.mp4″>Apple iTunes MP4</a> OR <a href=”__path to your video image__.ogv”>OPEN FORMAT VIDEO</strong></a>
</b></font></td></tr></table></a></div>
<br clear=”all”>

<script type=”text/javascript”>// <![CDATA[
var sd = new SWFObject('__path to your media player__/mediaplayer.swf','mpl','560','402','8');
sd.addParam('allowscriptaccess','always');
sd.addParam('allowfullscreen','true');
sd.addVariable('height','402');
sd.addVariable('width','560');
sd.addVariable('image','__path to your video poster image__.jpg.jpg');
sd.addVariable('file','__path to your video image__.flv');
sd.write('__this script id__');
// ]]></script>

Now, pretty much anyone who isn’t using an old IE6 browser can have easy access to your videos either using the <video> tags or flash player first.  Of course, don’t forget that you could just stick the links under your embedded YouTube video, but then the non-flash crowd gets a missing plug-in message.  I haven’t really decided yet, but I think I’ll stick with flash first.   I’ll put my links over the fallback image so that everyone gets something pretty to see straight away, even if they’re going to have to add a click to see the video.

Distributing a video product can be very simple. I just shoot a video with my iPhone. Touch the share button. Touch the ‘Send to YouTube’ button and I’m done.

But if one wishes to produce a regular video program or include video elements in one’s web page or blog then distribute it to the general public things start to get a little more tricky. My wife has a Droid Eris which runs on Android. You may have an old version of Internet Explorer. (Please tell me you don’t.) Some of you have Macs which choke on about 75% of the web’s videos because they are in Flash. On top of everything else, like the iPhone, the new iPad won’t be able to handle Flash at all. We could choose to curse the darkness (you fill in who you would blame), but it is dark so we need to light a candle if our web media is going to continue to be relevant into the future.

In addition to the variety of operating systems or hardware one might have, there are many different browsers one might use. Oh, and there is a change in the HTML standard with regard to video coming down the pike as well. In anticipation, HTML5 has already been implemented in some form or another in most contemporary browsers.

An extra challenge in making video forward compatible is that the HTML5 <video> tag standard codecs have not been determined. Two top contenders are OGG and H.264. OGG has no patents but it is performance deficient. H.264/MPEG-4 AVC has patents but is easily licensed (for a price) and is backed by Apple. I plan to kill the iPod-iPhone best-bet-on-forward-compatibility birds with the H.264 video, up to 1.5 Mbps, 640 x 480, 30 frames per sec., Low-Complexity version of the Baseline Profile with AAC-LC audio up to 160 kbps, 48 Khz, stereo audio in the ‘mp4′ container (per Apple). Both Handbrake and FormatFactory can do this . Lifehacker reports: “In terms of HTML5 and video, Opera has gone the way of Firefox, supporting native, Flash-free streams of the Ogg Theora format, but not H.264. Apple’s Safari supports only H.264, and Google Chrome supports both.” Mozilla has posted explicit directions for how to make media available for all browsers. Unfortunately, somebody needs to write the java script to generate the player. Sublime video is working on this and has a prototype up at their website. They promise to provide it free for noncommercial use.

The question remains what can one do today? The good news is that if your OS-Browser combo (henceforth to be referred to as your client) can’t play the provided HTML5 video it ignores it. So, I will be providing code for HTML5 video in all cases.

Modifiers for the video tag include controls, preload, and autoplay. The default is not to autoplay so you can leave that out if you just want the video to start loading without playing. Preload=”none” is the default and does not need to be included . Here are a couple of examples from Video for Everybody. The controls inherent to HTML5 (not modified with java script) are basic and don’t allow for moving to full screen. Fortunately, some browsers (thank you Firefox) make this available in the right-click menu. The video will only be as big as will fit in the space provided by the width and height modifiers.

<video width=”320″ height=”240″ controls preload autoplay>
<video width=”320″ height=”240″ controls preload=”none”>

But remember that the source video format depends on the client. The iPhone is even limited as to what the maximum resolution it can play will be. The approach that seems to be evolving on the web is to use the multiple source option for HTML5 video. The browser simply plays the first source that is compatible and ignores the others. Modifiers for the source include specifying the video and audio codecs and/or the container type. An example of using just the container type is given by Video for Everybody (VfE). Here the first is for Firefox, Chrome, and Opera and the second allows the iPhone, iPad, Mac crowd to play and the last lets the non-’mov’ browser play video in the ‘mp4′ container. I did not test this.

<source src=”video.ogv” type=”video/ogg”></source>
<source src=”video.mov” type=”video/mp4″></source>
<source src=”video-desktop.mp4″ type=”video/mp4″></source>

Video on the Web posts most of the parameters related to <source>. Here is their example of two video files with the optional container type and codecs specified. This speeds how quickly the client can reject an unplayable format which speeds load time:

<video width=”320″ height=”240″ controls>
<source src=”NewOrleans2006.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>
<source src=”NewOrleans2006.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘></video>

But wouldn’t it be nice to offer Flash with its ability to go full screen with just a user click to those clients capable of doing so? (Please don’t rant about the security issues with Flash unless you are one of the few pure ones who live outside of the influence of YouTube, okay?) There appears to have been a lot of attention given to providing Flash as a last resort. This process is described as “degrading” to Flash. The filter works something like this. If the client has a browser (Firefox, Chrome, and Opera) that can handle OGG, it plays the first source and skips everything else within the video tags. If it is a Mac, iPhone, or iPad, it skips the first source and lands on a second source in a ‘mov’ container. If the client is an iPhone or iPod it could play an alternate second source generated using QuickTime Pro. I’m lazy so I’m just going to have on H.264 source small enough that both Mac and iPhone (and presumably iPad) users can share. If one is watching on the web 640 px is plenty wide enough. If I didn’t have doubts about licensing issues I might reverse the OGG versus H.264 order. Finally, an object can be included within the video tags to provide ELSE actions if the client can’t play HTML5 video. In this scenario, the object is flash video. After studying the above sources, I adapted their code for my blog to illustrate their degradation algorithm using my own web host’s flash player. It starts OGG, then filters down to an iPhone file in a ‘mov’ container, then degrades to flash. Since I’m not doing the QuickTime Pro deal, I use the ‘mp4′ container instead of ‘mov’. Currently, this code has been demonstrated to degrade to flash on Internet Explorer 7. When using Opera 10.5, Chrome or Firefox, it plays the ogg file as HTML5 video. It switches to the ‘mov’ HTML5 only on the iPhone. My display is broken on my iBook so I didn’t test with that. My wife’s Eris also handles this well. The relevance of the lead in video is that it is written just like this. (It appears that Firefox 3.5 does not display the poster image, but Firefox 3.6 does. Otherwise the player seems the same.)

<video controls width=”560″ height=”402″ poster=”__Your_Full_Poster_Path__.jpg preload>
<source src=”__Your_Full_Video_Path__.ogv” type=”video/ogg”></source>
<source src=”__Your_Full_Video_Path__.mov” type=”video/mp4″></source>
<object width=”560″ height=”402″ type=”application/x-shockwave-flash”
data=”__Your_Flash_Players_Full_Path__.swf?image=__Your_Full_Poster_Path__.jpg&amp;file=__Your_Full_Video_Path__.flv”> <param name=”movie” value=”__Your_Flash_Players_Full_Path__.swf?image=__Your_Full_Poster_Path__.jpg&amp;file=__Your_Full_Video_Path__” />
<!– fallback image –>
<img src=”__Your_Full_Poster_Path__.jpg” width=”560″ height=”402″ alt=”__Your_Video_Title__” title=”No video playback capabilities” />
</object>
</video>

One little caveat for you WordPress posters. If you switch in the online editor from HTML to Visual view the editor will happily foul up all this wonderful code. Stay in HTML view till you publish and you’ll be just fine. We’ve only scratched the surface of this topic so here are some links to the places I went to to get to this point. Hope you find this all helpful.

Useful Resources:
Video on the Web
Video for Everybody
Sublime Video
Mozilla on HTML5
Lifehacker on Opera 10.5
arstechnica

YouTube in Division Floated Left without a border

The most challenging formatting comes with floating a video thumbnail to the left and allowing text to wrap down the right side.  The embed code one gets from the video host (YouTube for the example on the left) does not allow for such formatting.  If there is a slicker way to handle this, please let me know in the comments.

What I did was create a division within html that I could float left.  This also gives the option of including a frame, but in my standard layout I don’t do this.  Early versions of Internet Explorer reportedly did not handle the margins (spacing outside the division) or padding (spacing inside the division) properly.  IE7 appears to have rectified this.

An example of this code is shown here:

<div  style=”text-align: center; margin: 3px; padding: 3px; float: left; width: 230px;”><object width=”226″ height=”170″ data=”http://www.youtube.com/v/Mv7Hl54u-CA” type=”application/x-shockwave-flash”><param name=”align” value=”left” /><param name=”src” value=”http://www.youtube.com/v/Mv7Hl54u-CA” /></object>Centered Caption</div>

Embed Life Adventures Player in Division Floated Left without a border

Another video host is blip.tv, which allows one to modify the appearance of their player slightly.  For example, I added the name of my travel blog Life Adventures in the branding field at the bottom of the video. I’m using the exact same division tags as in the previous code but pasting the blip.tv embed code between the tags. I think this looks less visually cluttered on such a small thumbnail than YouTube which superimposes their logo in the bottom right hand area.

Embed Vimeo in Division Floated Left without a border

Vimeo also offers hosting service. While it doesn’t impact the blog reader’s interface, Vimeo is constantly asking their user’s to upgrade. It is a minor annoyance, but not something YouTube or blip.tv do.

On the other hand, look how cool the player is.  Nothing but thumbnail, baby.  For the blog reader, this is the cleanest interface I’ve found.

The “also rans”

There are a multitude of ways to show flash video in WordPress. Some require javascript. Others require a plug-in. One is limited only by the lengths to which one is willing to go in order to master this media. Here are some further examples. I might use these in special cases, but it is doubtful. That is why they are not included in the polling. I just include them here for the sake of completeness.

Script to Dreamhost’s JW Player javascript

One can also use one’s host’s player. (Be aware of any licensing issues. For more information, contact your host provider.) My host has licensed the use of the JW Player. The advantage here is that one has full control of the display. Another advantage is that one can keep all the video files stored at one’s own site. The disadvantage is that it requires a minimal comfort level with same basic java scripting. I’m not sure it is worth it, when one has the option to just cut and paste embed code from video host providers. (If you use Dreamhost’s video format converting utility they generate the java. If not, remember to add 20 to the video height to get the overall player height if you show a toolbar.)

Dreamhost’s JW Player using the WP-FLV Plug-in

This plug-in is conveniently provided by my host provider. My main gripe with the plug-in is that it does not allow for a poster image so the video “thumbnail” is a black rectangle. I’m not sure why Dreamhost doesn’t just default to the Embed FLV plug-in.

JW Player set up by the Embed FLV Plug-in

Fully customizable player. But all flash players using this plug-in must have the same style in every instance of every post. For example, if the toolbar is set up to auto-hide in this post, it will auto-hide in every post.

I hope this will save someone some time in figuring out how to display flash in WordPress.

And, now, the polls are open.

Loading…