Producing Participatory Media

Producing Participatory Media
Week 4 - February 6

Topics:

Video Aggregation Sites

Video Aggregation Software

Pushing online video further

Video Aggregation Sites

List on the wiki: Wiki::VideoAggregators for all to edit, update and reference.

Video Aggregation Software

List on wiki: Wiki::DesktopVideo Aggregators

Pushing it further

Using existing web based technologies in combination with audio and video on the internet we can push the medium further. From allowing tagging to occur within video to simply offering a better experience we might be able to offer some of the things that video blogging and podcasting are missing.

JavaScript and QuickTime (on the web)

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.
There is more about embedding QuickTime in the handout from last class.
Apple also has more 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_spring07/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_spring07/embedded.jpg", "mymovie", "320", "255");
					myQTObject.addParam("href", "http://itp.nyu.edu/~sve204/ppm_spring07/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 recently 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).

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 only) by changing the URL in the "flashvars" parameter.

A Dynamic Example (Using PHP) | Source Code

Checkout the tutorials on gotoAndLearn.com: 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_spring07/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.flv");
					   so.write("flashcontent");
					</script>
				</div>
			</body>
		</html>

Here is how it is rendered:

You *should* be able to convert video to Flash on the lab machines that have Flash installed through QuickTime Pro. There are other ways of course.

What's Next?