Blair's Blog

I’ve been wondering how to add videos to my blog posts and finally had a reason to actually figure this out after taking a panoramic view of the mountains and foothills while out hiking in K-country. There is a new “add Media” feature incorporated into WordPress v2.5 that includes the ability to add video to a post or page.

The capability is a bit rudimentary, but does work. The default functionality adds a the filename of the movie file as a hyperlink, upon following the hyperlink the movie opens in a new window. The code added to the post is simple:

<a href="http://blog.cafewall.com/wp-content/
uploads/2008/04/mov07721.mpg">mov07721.mpg
</a>

And this is the result:
mov07721.mpg

I fancied things up a bit by taking a screenshot of a frame in the video and replacing the filename with an image tag pointing to the screenshot as follows:

<a href="http://blog.cafewall.com/wp-content/
uploads/2008/04/mov07721.mpg">
<img class="alignnone size-full wp-image-100"
title="Click to view movie..."
src="http://blog.cafewall.com/wp-content/
uploads/2008/04/movie-frame.jpg"
alt="Windy Ridge Movie" width="324" height="261" />
</a>

The result is the same, except that you follow a link attached to the frame capture image:

However, the way that this opens onto a separate page was not exactly what I had in mind. I really wanted the video to just stream on the page – I wanted embedded video. A google search turned up an O’Reilly site that was a huge help. The solution is to used the html <object> tag to include the video object on the page. Here is the code that I used:

<object
classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b"
width="320" height="256" codebase="http://www.apple.com/qtactivex/
qtplugin.cab#version=6,0,2,0">
<param name="src"
value="http://blog.cafewall.com/wp-content/
uploads/2008/04/mov07721.mpg" />
<param name="controller"
value="true" />
<param name="autoplay" value="false" />
<embed
type="video/quicktime"
width="320" height="256"
src="http://blog.cafewall.com/wp-content/
uploads/2008/04/mov07721.mpg"
autoplay="false" controller="true">
</embed>
</object>

This finally gave me the result I was looking for, embedded video that could be played right on the page:

You can see this at work in the Windy Peak Ridge hike post.

No Comments »