Producing Participatory Media

Producing Participatory Media
Class 3 - July 8

Topics:

Desktop Video Aggregators

Online Video Aggregators

Pushing online video further?

Desktop Aggregators

Just as there exists software for subscribing to audio podcasts (RSS feeds with audio enclosures) there are several pieces of software for subscribing to video blogs and video podcasts.

iTunes
Miro
Songbird

Each of these pieces of software have their own set of features and formats that they support. It is interesting to track the development of each, especially as they add things like Tagging, Integrated Directories, BitTorrent support, Sharing and so on. Both Miro and Songbird are Open Source and use VLC (worth a look itself) for behind the scenes playback.

Further interesting is the number of desktop aggregator clients that seem to have disappeared or are no longer being developed (examples: ion or FireANT).

Online Video Aggregators

In recent years their has been a rise (and perhaps a slight decline) in online video aggregators (perhaps replacing the desktop aggregators). There are many possible explanations such as increasing penetration of broadband to the home, such a wide amount of available video that takes up quite a bit of valuable disk space and perhaps most important how people find video (through word of mouth, email and so forth).

Among the ranks of desktop aggregators are:

FireAnt
MeFeedia
Yahoo Video
Google Video

Other interesting video aggregators are directly social allowing people to vote videos up and down (such as Digg):

VideoBomb
Digg - Videos

Certainly in the spotlight are sites that allow you to upload and then subsequently host your own videos:

YouTube
OurMedia
Revver
Blip.tv

YouTube probably doesn't need an introduction as it is the premiere user generated video/sharing site. OurMedia is similar but community funded and linked together with the Internet Archive. Blip.tv is more geared toward the prosumer (I can't think of a better word to describe it) crowd. It's terms of use are more relaxed and flexible and not perpetual or as all encompassing as YouTube's. (See Blip's Terms of Service, Grant of License section vs. YouTube's Terms of Use, 6. Your User Submissions and Conduct.) (I am not a lawyer and am guessing that these term differences are probably cosmetic but they do help define the type of user.)

Other sites that are attempting to push things a bit further by allowing mobile uploads, remixing (editing) and so on are:

Jumpcut
Eyespot

Definitely work a look..

Pushing it further ourselves

We have discussed quite a bit that online media is missing something that the text web has. Text is parseable, easy to copy, paste, reuse, share, link within and so on. Below are some ways that we can give a shot to pushing video further by allowing some of these things to happen.

JavaScript and QuickTime

Since QuickTime can be used as a browser plugin, it can be scripted.

The first step is to embed the video:

	  <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="320"HEIGHT="257" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" ID="myMovie">
		<PARAM name="SRC" VALUE="http://itp.nyu.edu/~sve204/ppm/embedded.mp4" />
		<PARAM name="AUTOPLAY" VALUE="false" />
		<PARAM name="CONTROLLER" VALUE="true" />
	  <EMBED SRC="http://itp.nyu.edu/~sve204/ppm/embedded.mp4" WIDTH="320" HEIGHT="257" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/" NAME="myMovie">
	  </EMBED>
	  </OBJECT>

(Careful when using this code. Make sure that stray line breaks don't mess things up.)

Apple has more optins online at: Embedding QuickTime.

You reference the movie from JavaScript using the ID attribute (for Internet Explorer) or the NAME attribute (for Netscape compatible browsers).

document.myMovie.Play()
document.myMovie.Stop()
document.myMovie.GetTime()
document.myMovie.SetTime(500) - 500 is the frame not the timecode

For More Commands, See: JavaScript Scripting Guide for QuickTime

What can we do with this?

How about 2 videos at once or how about creating a system where you can associate comments or tags at a specific spot in the video?

My Example (Don't forget to view source)

Eolas

Eolas is a company that has a patent on technology related to embedding objects in web pages. Microsoft, after losing a patent fight has put in place a work around which requires the user to click to activate the object/plugin. The other option is to utilize a script to dynamically include the plugin code instead of it being in the original HTML.

It is a bit of a pain to dynamically write the HTML for QuickTime (and other plugins) but there exist several JavaScript libraries that exist to make it easier as well as offer other benefits along the way.

Geoff Stearns' QTObject embed is one of the most elegant and easiest to use.

Here is an example:

		<html>
			<head>
				<!-- QTObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/ -->
				<script type="text/javascript" src="http://itp.nyu.edu/~sve204/ppm_summer08/qtobject.js"></script>
			</head>
			<body>
				<div id="video">
					<script type="text/javascript">		
						// create the qtobject and write it to the page, this includes plugin detection
						// be sure to add 15px to the height to allow for the controls
						var myQTObject = new QTObject("http://itp.nyu.edu/~sve204/ppm_summer08/embedded.jpg", "mymovie", "320", "255");
						myQTObject.addParam("href", "http://itp.nyu.edu/~sve204/ppm_summer08/embedded.mov");
						myQTObject.addParam("target", "myself");
						myQTObject.addParam("controller", "false");
						myQTObject.write();
					</script>
				</div>
			</body>
		</html>

Here is what the above yields:

One of the really nice things about using this script is that the video doesn't automatically load if you use a "placeholder" image. This way many video files can be included on the page without affecting the load time.

The "mymovie" parameter is both the ID and Name attribute that can be used in JavaScript as explained above.

More examples here: http://blog.deconcept.com/code/qtobject/qtobject.html

Flash Video Player

Flash has emerged as a nice video player for web based video content. It has a couple of advantages over things like Windows Media and QuickTime such as it's fast load time and it's large installed base. It is also easily extended by those who work with Flash. Unfortunately, it has very limited support for different codecs and doesn't have a corresponding desktop playback application nor does it have support on devices like iPods, PSPs, Set-Top-Boxes or mobile phones (though this may change). Flash now supports the H.264 flavor of MPEG-4 video, now very much an industry standard. It also is starting to gain playback capabilities on mobile and other devices.

Here is our example video as rendered in a very simple Flash video player:

Here is the embedding code:

		<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="player_lite" align="middle">
			<param name="allowScriptAccess" value="sameDomain" />
			<param name="movie" value="player_lite.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#ffffff" />
			<param name="flashvars" value="url=embedded.flv" />
		<embed src="player_lite.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="player_lite" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="url=embedded.flv" />
		</object>

Basic Flash Video Player Source File

One of the nice things about the above player is that it, like the QuickTime player can load any video file (flv or mp4 only) by changing the URL in the "flashvars" parameter.

A Dynamic Example (Using PHP) | Source Code

Checkout the tutorials on gotoAndLearn.com: Flash Video Basics Part 1 through 8 to create your own player

Last, the Eolas issue applies to Flash content as well. Our friend Geoff Stearns has a SWFObject embed that works around the issues.

Here is how we would use the SWFObject to accomplish the above embed:

			<html>
				<head>
					<script type="text/javascript" src="http://itp.nyu.edu/~sve204/ppm_summer08/swfobject.js"></script>
				</head>
				<body>
					<div id="flashcontent">
						<script type="text/javascript">
						   var so = new SWFObject("player_lite.swf", "myflvmovie", "550", "400", "7", "#ffffff");
						   so.addVariable("url", "embedded.mp4");
						   so.write("flashcontent");
						</script>
					</div>
				</body>
			</html>

Here is how it is rendered:

Encoding Video for Flash Now that Flash supports H.264 in an MPEG-4 container, there are a myriad of applications that you can use to encode for it. Since we have been working with QuickTime Pro let's stick with that for now.

You can take any video that you can open in QuickTime and convert it to H.264 by selecting "Export" and "Movie to MPEG-4". Under "Options" you want to select MP4 as the File Format and H.264 as the video format. The rest of the settings are exactly the same settings we went through last class for encoding QuickTime video as H.264.

More information:
What just happened to video on the web?

What's Next?

HTML 5 Video Tag

Currently the W3C is working on the specification for HTML 5. Included is a new tag called "video" (there is also one called "audio"). This tag would make video playback universal on browsers but doesn't include support for a specific format due to the fact that there doesn't exist a non-patent encumbered video codec that can be used.

HTML 5 Spec
w3schools.com HTML 5 Video Tag
HTML 5 Video Tag Test

Fortunately, in the case of the "audio" tag, they have specified that browsers must support the WAVE format with PCM encoded audio (basically uncompressed audio).

w3cshools.com HTML 5 Audio Tag
HTML 5 Audio Tag Test