How to videoblog with Blogger


Creative Commons License Tutorial by Svein Høier and Jon Hoem 
(Arts and Media Dept., Norwegian University of Science and Technology)
  1. Background
  2. What you need
  3. Concept
  4. Editing the template
  5. Workflow
  6. How to compress the video with QT Pro
  7. General tips about compression
  8. How to make a general poster frame with QT Pro
  9. How to make a unique poster movie with QT Pro
  10. How to upload the files and create a posting in the videoblog
  11. How to use some PHP and Javascript to launch a dynamic popup window
  12. Copy and paste the templates used in the demos:

Background

Almost everyone who owns a computer has the ability to edit and publish video. Several hundred thousand people already have photoblogs and there are  more than 1,5 million text-bloggers. How come there are so few videobloggers around? Is it really that hard to make a videoblog? No, in fact it has become pretty easy, but in order to help you start this tutorial will show you how to become a videoblogger using Blogger.

What you need

It is nice to know a little about html, but don´t worry the most important part is your interest in posting short videos regularly.

Working with online video you will have to make some decisions regarding which video-format you would like to use. This tutorial gives an introduction to videoblogging based on QuickTime. Further work will implement both other proprietary and standardized formats like Real, WMP, MPEG-4 and perhaps SMIL.

Videos on the web have to be rather small, both regarding sceen-size (typically 180x120, 240x180 or 320x240 pixels) and framerate (typically form 12-20 frames per second). What`s nice about these limitations are that almost any device able to record video can be used for videoblogging.

When it comes to software you´ll obviously need a networked computer and a webrowser. There are a lot of different software made for videoediting, some of them are free, but this tutorial  requires that you invest in QuickTime Pro (costs something like 20 Euro at Apple). QuickTime Pro enables an easy way of both encoding or transcoding video, and makes production of poster frames (or thumbnails) a breeze.

Concept

The concept is to make templates within Blogger that enable us to use Blogger´s “Link field” to publish links to videos, local video or video residing wherever, instead of using the original functionality, using the “link field” to link to URLs. We do this by using:
  1. A poster frame / or thumbnail (one-frame QuickTime movie or graphic file like .gif, .jpg, that represents video in a good way, and is what meets the eye of the reader) .  In this example we use a .mov-file with one frame, similar to the first frame in the complete video.
  2. Typing in a filename in the “Link field” in Blogger (remember to enable “Link field” in Bloggers Settings)
  3. Provide additional text, no different than blogging in Blogger in the first place. 

Editing the template

Making a new blog is explained  in detail by Blogger. Blogger provides hosting for blogs at blogspot.com, but they only host the textual content. Since your videos has to be stored somewhere else you might as well put your blog on your "own" server too. How to do this is explained by Blogger.

As soon as you have created your blog you have to makes some changes to the part of your template which defines how the content in all your posts will be displayed. The code doing this is all that is written between <!-- Begin .post --> and  <!-- End .post -->. This code is translated by Blogger creating the HTML for each blogpost.

There are several ways doing this. We are going to give you two slightly different examples:
  1. A template with unique poster frames for each movie, playing the videos in the exact same place as the poster frames.
  2. A template using a general poster frame, playing the videos in the QuickTime player
The examples below (1&2) might seem a little complex. In order to provide cross-browser compability you need both the OBJECT element and the EMBED element. Browsers that understand the OBJECT element ignore the EMBED element, and those that don't understand the OBJECT element use the EMBED element. Sorry, this is the way it has to be, unless you are prepared to ban all IE-users ;-)

If you want to know the details, check Apple´s webpages about embedding QuickTime into a website.

1. Unique poster frames, playing video within the webbrowser (Demo)

We would like to have a QuickTime “video window” in each post. To achieve this we have to change the code into something like this :

<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl></h3>
</BlogItemTitle>
<div class="post-body">
<p>

<!-- This is where the "video" begins -->
<BlogItemUrl>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="240" height="196" codebase="http://www.apple.com/qtactivex/qtplugin.cab" align="right" border="1">
<param name="src" value="http://yourdomain.org/videoblog/<$BlogItemUrl$>_poster.mov" />
<param name="href" value="http://yourdomain.org/videoblog/<$BlogItemUrl$>.mov" />
<param name="controller" value="false" />
<param name="scale" value="tofit" />
<param name="autoplay" value="false" />
<param name="target" value="myself" />
<embed
src="http://yourdomain.org/videoblog/<$BlogItemUrl$>_poster.mov"
href="http://yourdomain.org/videoblog/<$BlogItemUrl$>.mov"
width="240" height="196"
controller="FALSE"
scale="tofit"
autoplay="false"
target="myself"
cache="true"
type="video/quicktime"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</BlogItemUrl>
<!-- This is where the "video" ends -->

<$BlogItemBody$>
</p>
</div>
<p class="post-footer"> <em>Posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage> <br />
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$>
</p>
<br clear="all"/>
</div>
<!-- End .post -->

Marked with red: is the code for the links to the files which is going to be displayed as thumbnails / poster frames. The poster frame could be whatever you like, as long as QuickTime support the format: gif, jpeg, mov, tiff and so on. In this tutorial we use .mov because they are easy to make with QuickTime Pro.
Marked with yellow: the link to the movie.

Marked with green: defines where to play the movie. This alternative opens and play the video within the same frame, defined by target="myself" in the example above.

2. General poster frames, launching video in the Quicktime player (Demo)

We would like to have a generic / general poster frames, and launching the video in QuickTime Player. The code belove enables us to use a clickable identical "video icon" (poster frame), a "video icon" that could be scaled to whatever, in this template: 50 x 50 pixels. To achieve this we have to change the code into something like this :

<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl></h3>
</BlogItemTitle>
<div class="post-body">
<p>

<!-- This is where the "video" begins -->
<BlogItemUrl>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="50" height="50" codebase="http://www.apple.com/qtactivex/qtplugin.cab" align="right" border="1">
<param name="src" value="http://yourdomain.org/your_path/your_name_of_general_poster_frame.jpg" />
<param name="href" value="http://yourdomain.org/your_path/<$BlogItemUrl$>" />
<param name="controller" value="false" />
<param name="scale" value="tofit" />
<param name="autoplay" value="false" />
<param name="target" value="quicktimeplayer" />
<embed
src="http://yourdomain.org/your_path/your_name_of_general_poster_frame.jpg"
href="http://yourdomain.org/videoblog/<$BlogItemUrl$>"
width="50" height="50"
controller="false"
scale="tofit"
autoplay="false"
target="quicktimeplayer"
cache="true"
type="video/quicktime"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</BlogItemUrl>
<!-- This is where the "video" ends -->

<$BlogItemBody$>
</p>
</div>
<p class="post-footer"> <em>Posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage> <br />
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$>
</p>
<br clear="all"/>
</div>
<!-- End .post -->

Marked with red: the code for the link to thumbnail / poster frame. The poster frame could be whatever you like, as long as QuickTime supports the format: gif, jpeg, mov, tiff and so on. In this example we use .jpg because they are easy to make with any image editor.
Marked with yellow: the link to the movie. It can be a video on your webserver or a video some other place on the web.

Marked with green: defines where to play the movie. This alternative opens and play the video within the QuickTime player, defined by target="quicktimeplayer" in the example above.

Even easier:
When you´re using a general poster frame you´ll be able to use the URL-field in Blogger in a different manner. If you type the complete URL to the movie you may use the same template in order to link to both files stored on you server and movies stored elsewhere, and using both different protocols as well, like http and rtsp. In order to achieve this you only have to make two small changes in the template:

<param name="href" value="http://yourdomain.org/videoblog/<$BlogItemUrl$>" /> and href="http://yourdomain.org/videoblog/<$BlogItemUrl$>"

into

<param name="href" value="<$BlogItemUrl$>" /> and href="<$BlogItemUrl$>"

This is almost like using the URL-field the way it is intended to by Blogger :-)

Workflow

  1. Open original video in QT Pro
  2. Save the edited video
  3. Create a poster frame
  4. Open the Blogger interface
  5. View you blogpost :-)

How to compress the video with QT Pro

Based on size of your original video file, you will probably want to do a "transcoding" ( a re-encoding, or a new compression if you like) of your movie before you publish it. Open your movie in QuickTime Player Pro, and go to file>"export". First choose "Movie to QuickTime movie" (marked), and then click "options" (also marked).

Exporting from QT Pro

By clicking "options" you will be able to modify "settings"and parameters like:

Remember to choose "fast start" at bottom. This makes the video begin playing before the whole file is downloaded, pretty much the same effect as "streaming" the video, but the video can be stored at the users computer and viewed several times without using more bandwidth.

General tips about compression:

There is always a "quality versus size" issue when compressing audio and video. Here are some general tips :

Not happy having to do this completely on your own? OK, given that you have QuickTime Pro, here are some suggestions:

These settings are chosen in order to keep the files relatively small, but there might always be other, perhaps better ways to do it. Try different settings yourself.

How to make a general poster movie with QT Pro

By opening a graphic file (produced by yourself) within QuickTime Player Pro (file formats like tiff, jpg, psd, gif and lots of more), you can produce a general poster movie by doing a simple file>"save as". Choose "make movie self contained", like this:

Videoblogging Illustrated 1

How to make a unique poster movie with QT Pro

Open the compressed movie in QuickTime Player, and decide what frame you want to use as the unique poster movie. You might of course use any frame in the video when making a poster frame, but in most cases you´ll probably want the poster frame to match the first frame of the video: Place the marker on the first frame in the timeline, then press "Shift" and the "right arrow" once. This highlights the frame in the beginning of the movie. Choose "Edit" in the menu and "Trim" and you have a movie with one single frame.

Videoblogging Illustrated 2

Save the movie by doing a simple file>"save as", and name the file  "<your-name-of-movie>_poster.mov" at the end of the filename. Remember to save as "make movie self contained", like illustrated above in creating a general poster movie.

Now you´ll have to files stored locally:  "<your-name-of-movie>.mov" and  "<your-name-of-movie>_poster.mov".

How to upload the files and create a posting in the videoblog

You now have both the compressed movie and the necessary poster movie, so it`s about time to upload your content with Blogger.You could do this by logging into Blogger, or by using BlogThis, just use the method you find most convenient. Punch in the title of the post (as usual), the path to the movie in the URL "field":

Videoblogging Illustrated 2

Then click "upload file" (marked), browse your local machine to point to your new movie, check that the path/directory is correct, and click orange upload-button. Thats it!


How to use some PHP and Javascript to launch a dynamic popup window (Demo)?

So far we have provided two examples of videoblog workflows, and of course you could do this in a lot of various ways. In the following we will discuss some of the alternative solutions, like using a popup window with dynamic videos.

Before you look at this solution, you should consider two aspects. You will need to have your blog residing at a PHP-enabled server to use this solution, and limitation #2: Users will need to have a Javascript-enabled browser. But in some cases this solution might be convenient:

- Creating the popup window:

You will need a file called "popup.php" with some code like this one:

<?php
if ($_POST["url"])
$url = $_POST["url"];
else if ($_GET["url"])
$url = $_GET["url"];
else
$url = 'start.mov';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>VideoBlogWindow </title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta content="MSHTML 6.00.2800.1400" name=GENERATOR>
</head>
<body bgcolor="#778899">
<div align="left">
<br>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" id="320x240" name="sorrytime" align="middle">
<param name="controller" value="true">
<param name="src" value="<?=$url?>">
<param name="autoplay" value="true">
<param name="bgcolor" value="#778899">
<embed src="<?=$url?>" bgcolor="#778899" width="320" height="256" align="middle" type="video/quicktime" autoplay="true" controller="true"></embed>
</object><br>
<br>
<br>
</div>
<p></p>
</body>
</html>

- What does this PHP code do?

The less traditional part in this template is the beginning and the sdr parameter, all marked with red:. These to little snippets of code does the following: the movie defined in the URL replaces the $url parameter. When opening a link like "popup.php?url=the_movie_you_want_to_watch.mov" , the $url parameter (the source, scr, in the QuickTime plugin) changes to "the_movie_you_want_to_watch.mov". This means that you use the same file ("popup.php") every time the user wants to watch a video, and this also includes that you could use the "link field" in the same way that in the two examples above.

- Launching the popup window:

You now have a lot of different options to launch the video window. You can launch it from a text link, a image or QuickTime movie with a href parameter, and so on. In this tutorial we will modify a Blogger template in a way that clicking on the post title will launch the popup and play the link in the "link field".

- Modify the template:

This time we will modify the BlogItemTitle "area", so that clicking the title in the post will launch a popup window playing the BlogItemUrl. Look for this area in your template:

<!-- Begin .post -->
<div class="post">  <a name="<$BlogItemNumber$>"></a>

<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
<h3 class="post-title">
<$BlogItemTitle$>
</h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

And change it into this:

<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<BlogItemUrl>
<a href="" onclick="window.open('http://your_server_adresse_whatever/popup.php?url=<$BlogItemUrl$>','video','width=340,height=300,top=20,left=20')" title="external link" class="title-link"></BlogItemUrl>
<h3 class="post-title">
<$BlogItemTitle$>
</h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

With these changes you can do a workflow like described above. A little tip would be to add "Play Video" in front of the title, so the user sees what you are trying to do: A. read the post, B. click the title, C.enjoy the video, D. comment the video!

Copy and paste the templates used in the demos:

Remember to to save the templates as ".html" (general/ unique/ dynamic Blogger template), or ".php video window" (popup)!!

Remember to change the templates based on local variation in server paths and so on!!

Show template for general poster movies

Show template for unique poster movies

Show template for dynamic Blogger template

Show template for php video window

Happy videoblogging!


<>Written by Svein Høier and Jon Hoem

Feel free to contact us if you got suggestions for improvements:

jon.hoem at hib.no

svein.hoier at hf.ntnu.no