14 Apr 2008

Adding embedded video

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/

And this is the result:

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/
<img class="alignnone size-full wp-image-100"
title="Click to view movie..."
alt="Windy Ridge Movie" width="324" height="261" />

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

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:

width="320" height="256" codebase="http://www.apple.com/qtactivex/
<param name="src"
uploads/2008/04/mov07721.mpg" />
<param name="controller"
value="true" />
<param name="autoplay" value="false" />
width="320" height="256"
autoplay="false" controller="true">

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 »

Trackback URI | Comments RSS

Leave a Reply

You must be logged in to post a comment.