Mix And Edit Media Online With Jumpcut

November 4, 2006 § Leave a comment

[jumpcut]

Create Movies From Video, Photo and Music

Adding to their frenzy of company purchases, Yahoo recently bought and is in the process of assimilating Jumpcut, a relative newcomer to the online video industry. Jumpcut differentiates itself from other contenders by offering a clever array of online editing tools for “mixing” video, music and photo files.

Manage Your Media

Whether it is actually shared code or just two companies with similar tastes, you can definitely see the Flickr effect in the Jumpcut interface. The Flash uploader and movie editor drag-n-drop features (ala Web 2.0 behavior) are top-notch and fun to use.

Upload Video, Photo and Audio

Despite a couple of minor glitches, uploading files was a snap. Users can choose between a fancy Flash-based uploader or simple HTML interface (the HTML progress indicator leaves something to be desired).

(screenshot: Flexible Upload Interface)

Users are permitted to upload files as large as 100 megabytes in any of the following formats:

  • Video: ASF, AVI, DIVX, FLV, MPG, MP4, MOV, WMV
  • Audio: AAC, MP3, OGG, WAV
  • Image: BMP, GIF, JPG, PNG, TIF

Jumpcut also supports direct import of photos from two other Yahoo companies, Flickr and Facebook.

When using the Flash uploader, you are reminded that uploading and converting files takes time.

Some one has a sense of humor… 🙂

(screenshot: Humorous Patience Reminders)

One of the glitches using the Flash interface is that if the upload fails before you can close the tagging dialog, you aren’t notified and it continues with these patience reminders, ad nauseum, until you give up and close the window.

Organize Files With Tagging and Sets

Users can organize uploaded files into “sets” and use tags to facilitate movie making and sharing.  Jumpcut provides a handy set of video clips to create common opening/closing video sequences.

Create and Share A Movie

Now for the fun part – combining the uploaded files into a movie. When editing, users can choose from several gadgets and features:

  • 24 title effects
  • 28 overlay and transition effects
  • 7 pre-built styles

The editing interface allows easy access to insert any previously uploaded item in a frame-by-frame storyboard format.

[editing]

(screenshot: Movie Editor Interface)

Search For and Mix Other Users’ Movies

Click on the Add section tab and search for shared movies to mix with your own.
[editing]
[sharing]
While you can identify movies vs. photos by the little icon in the lower-left corner, one shortcoming of set management is that you are not able to preview items or view any sort of summary.

If you add other movies, you’ll notice that the author shows as a contributor in your movie overview page.

Sharing and Publishing

After saving your movie, share with other Jumpcut members, email links to anyone or publish on your own website with several options. In fact, here’s the movie I made: Big Sur by Sarah and Joe.

Share “Open” Movies With Groups

One promising feature that sets Jumpcut aside from YouTube and other similar services is the ability to encourage others to “mix” your movie by marking it as Open. Naturally, this should facilitate the community aspect of the site and promote the growth of like-minded groups.

Publish Movies to Your Website or Blog

Just like the Big Three (YouTube, Google, IFILM), users can share their finished movies through email or by embedding them into a web page. In addition to “embed” code, users can copy HTML for a URL link with an optional thumbnail image.

Here’s our movie, embedded –

Thumbnail Link:
Big Sur

Embedded Viewer:

To simplify web publishing even more, Jumpcut provides the ability to create blog and other entries directly for the following services:

  • Facebook
  • Blogger
  • MySpace
  • TypePad
  • WordPress
  • Atom Enabled
  • Blogger API
  • MetaWebLog API
  • Digg
  • del.icio.us

Just provide your connection information, which is stored for future use, and you can create entries of your movies in minutes.

[sharing]

(screenshot: Tools To Publish Movie On Your Website)

Summary

VibeTalk Rating:
[rate 5]

I have to say that Jumpcut is fun and addicting. The smart use of Web 2.0 UI tools and generous storage capacity point to the future of such services.

While I admit that most of the visual effects are novelties, the ease of use and user community “mixing” feature definitely takes amateur video publishing to the next level.

I give this service five stars!

Advertisements

Alternatives To YouTube Video Sharing

October 30, 2006 § 4 Comments

Nine Other Services Reviewed

[social video sites]

DVGuru posted an excellent review of 10 video sharing services (including YouTube) back in April of this year. All them are still thriving and several mentioned as “new” are now available.

The author tests each service’s quality of interface, editing and sharing functions.

In addition to the ten listed, I recommend checking out Motionbox and Dabble.

Will any of these supplant the Big Three (YouTube, Google, IFILM)? Probably not, but they are likely to keep them on their toes by applying pressure for continued improvement.

Personally, I’m most interested in Jumpcut, which promises the best online video editing capability so far.

Even More Video Services

You could spend days finding more services. For those on a research mission, these sites have reviews that should get you started:

  • Testing Grounds: 33 services with regularly updated review and commentary by users and the service providers
  • The MustseeBlog: 40 services reviewed and categorized in a matrix on Apr 10 2006. The site is slow to maneuver because of large graphics, but worth a look

Anarchy Media Player 1.5 Adds YouTube Support

October 28, 2006 § 4 Comments

[anarchy logo]

New Version Includes Several New Features

Right on the heels of reviewing another WordPress plug-in called Viper Video Quicktags (Add YouTube To WordPress With Viper Plug-In) – and as luck would have it – I noticed that my good buddies over at An-Archos released a new version of my favorite media plug-in: Anarchy Media Player.

Anarchy brings together the work of several other open-source efforts to provide simplified music and video integration. Version 1.5 embeds (literally) the code from Viper to enable buttons for easier insertion of YouTube, Google Video and IFILM videos.

So, is it better than the two stars I gave Viper? Let’s see…

Using the Plug-In

Just like Viper, once enabling the plug-in you will see a few more buttons in the post editor:

[post editor]
(screenshot: WordPress Rich Text Editor)

These buttons are intended to shortcut the process of embedding video from “The Big Three” (I think that’s what I’ll call them now). You provide the ID, Anarchy adds the surrounding parameters.

[add youtube]
(screenshot: Add YouTube by ID)

The resulting code is in BBCode format (extra space added left of ‘youtube’):

[ youtube]IkEu-PdVlK0[/youtube]

And looks like this:


(embedded video: Lexus LS460 Parks Itself)

The advantage I hadn’t realized in reviewing Viper is that these buttons allow you to use the Rich Editor (which I don’t use). People often have difficulty embedding pure HTML tags because the Rich Editor “cleans” them up, deleting crucial pieces.

You also get buttons to directly embed Macromedia Director (DCR) and Shockwave (SWF) files, although who uses these anyway? 🙂

Other Supported Media

Anarchy supports several other file types and bundles two lightweight Flash players – one for Flash Video and one for MP3 files. The FLV player is from Jeroen Wijering (this is brand new in version 1.5.1 – see sidebar for a great story on this).

  • MP3 Audio (MP3)
  • Windows Media Video (WMV)
  • Macromedia Flash Video (FLV)
  • Quicktime Movie (MOV)

You don’t get special buttons for these additional formats; support is provided via automatic conversion of anchors to the appropriate embedded player.

In some ways I find this method more useful than a button – just create a hyperlink and any recognized format is automatically wrapped in the appropriate code.

For example, to embed an MP3 file, just make an anchor (hypertext link), like this:


Nickelback - Figured You Out

Which results in this:

Nickelback – Figured You Out

This works exactly the same way for video files, providing some consistency between formats. You can also toggle the visibility of the actual download link by editing a parameter in the plug-in.

Unfortunately, this method doesn’t allow dynamic changing of video sizes. You must configure playback parameters in the plug-in in the source code (this is a bit better in 1.5 because it’s a separate PHP file).

Configuration Options

Anarchy provides some basic configuration options and a couple thoughtful touches that make it stand out over other offerings.

  • Provides a replaceable “cover” graphic that shows the video playback frame without actually loading the video – the video is loaded after the user clicks the image
  • Gracefully displays a download graphic in place of the embedded movie if the Quicktime player is not installed on a users system
  • Attends to basic security by allowing the option to prevent the code from being executed from another location
  • Provides editable flags for video loop, autoplay
  • Provides color configuration, inline CSS formatting

Summary

VibeTalk Rating: [rate 4]

An-Archos does a great job pulling together several other authors’ work in a relatively seamless manner. The little design touches and super-responsive support make a big difference in the overall effectiveness.

For future releases, I would love to see a configuration panel in WordPress and more consistency for all video playback.

I give this plug-in 4 stars.

Add YouTube To WordPress With Viper Plug-In

October 21, 2006 § 7 Comments

Embedded Video Made Easy

Last month I covered some quick-n-dirty ways to display YouTube video in a WordPress blog site (Publish YouTube Video on Your Blog), but didn’t have time to review a plug-in I noticed at the last moment: Viper Video Quicktags.

This nifty plug-in promises to greatly simplify video integration. It supports BBCode tags and (in the 3.1.0 beta) provides the ability to launch external video players from a link.

Once configured, Viper provides several buttons in the WordPress administration screen when writing a new post that allow bloggers to instantly place video blocks from YouTube, Google Video and IFILM.

Using the Plug-In

You can use the plug-in with or without the WYSIWYG (rich text) editor option, but you may want to enable it if you’re having trouble (the beta worked ok for me). With the Viper enabled, new editor buttons allow you to past videos using the clip ID or file URL.

[wpadmin scr]
(screenshot: Viper Video Quicktags Interface)

Embedding a Hosted Video

To add a video link from one of the three supported services, add the ID using the appropriate button. The resulting code in your post will look something like this:


  

You can change the video size by adding “width” and “height” parameters:


  

The result will look like this:

I have to admit that at this point I began to wonder why I need this plug-in: I had to go to YouTube to get the video ID and could just as easily have copied the “embed” code from there.

Hmmm. Let’s try the QuickTime option…

Embedding a QuickTime Video from File

Viper allows bloggers to embed Apple QuickTime MOV files. Simply click the appropriate icon, specify the file URL, display width and height parameters, and viola! Embedded video.

The code looks like this:


[quicktime width="320" height="240"]http://www.vibetechnology.com/pub/video/clips/verizon-ferret.mov[/quicktime]

I have one problem with the way the plug-in behaves here – there is no title screen to make users aware of the video before actually playing it. Default QuickTime plug-in settings will go straight to loading then playing the file, which makes the page into which a MOV file is embedded larger than it needs to be at first.

One nice touch is that if users don’t have QuickTime installed, the MOV is embedded in a way that creates a “Install QuickTime” link.

Launch External Video Players

You can also add links that will invoke an external player by clicking the Windows Media Player icon. While this appears to be meant for .WMV files, this can also be used for AVI, FLV and MOV files. I’m not sure what the savings is here – you get the same behavior by adding a link to a file.

The code:


  

Summary

VibeTalk Rating: [rate 2]

Overall, I wasn’t too impressed with this plug-in.

While it reduces the amount you need to type, it doesn’t necessarily save you any time because you’ll still need to visit YouTube, Google or IFILM sites to locate the cryptic video ID. The shortcut to embed QuickTime videos is nice, but you end up configuring the QT plug-in externally anyway. I give this plug-in 2 stars.

Maybe I should go back and get Video Blogger to work, but I’ll probably stick to the Anarchy Media Player, which is open source and plays music files too.

Boost PHP Speed With “If-Modified-Since” [3/4]

October 16, 2006 § Leave a comment

<ul><li>An error has occurred; the feed is probably down. Try again later.</li></ul>

Improve PHP Performance

Welcome to the third installment of our four part series on how webmasters can reduce or even eliminate unnecessary server traffic. The heart
of this tutorial is the If-Modified-Since header and a technique called conditional GET.

Series Index

This section covers the impact of conditional GETs on RSS feeds.

Part III: Using IMS For Optimized RSS (and other) Feeds

Up to now, I’ve focused on how browsers can use IMS for conditional GETs, but in reality, browsers are only a small part of the picture. I learned last month that the real beauty of this technique has to do with making web crawlers work better.

RSS seemed to get the most attention here, so I wanted to pay particular attention to how they have been affecting the Vibe Technology website. What I found is that (for us, at least), RSS crawlers aren’t the culprits – search engine indexers are the big bandwidth hogs.

You can improve performance by optimizing RSS feeds, but you may find more impressive gains when leveraging the same conditional GET techniques with the full pages that are indexed by search engines.

However, before we talk about fixing the problem, let’s understand the problem through some web log analysis…

Required Tools for Web Log Analysis

Are you aware of just how many times a web crawler visits your website? Honestly, I wasn’t either, but since I’d heard it can be several times a day, I decided to find out.

Last month I focused on click tracking software that can give webmasters a picture of visitor behavior (Comparing Crazy Egg, Google and MyBlogLog). While I use MyBlogLog and Google Analytics on a daily basis, I needed to dig deeper for details on how spiders, worms and crawlers were affecting VibeTalk.

[sawmill logo]

To accomplish this, I used an excellent tool called Sawmill Professional by Flowerfire. They have a 30-day download-able version on the website.

Focus Analysis on Relevant Data

Web logs can be misleading at first glance. For example, Vibe Technology’s September logs show nearly 140,000 “hits”. Strictly speaking, this is true, but understand that *every* element of every requested page is a “hit”. Sawmill does a great job of grouping hits into pages and sessions, but make sure you are tracking bandwidth data at the server level (see Configure IIS section below).

Configure Sawmill Data Filters

Because of website development, much of our traffic was internal. If you have the same issue, try the following log filter for Sawmill (change the IP address and domain name accordingly)


 if (c_ip eq "127.0.0.1") or 
  (c_ip eq "64.81.247.162") or
  (ends_with(hostname, "vibetechnology.com")) then "reject"

The third test only works if your server resolves hostnames. Also, remember to rebuild the database after creating Log Filters.

Configure IIS for Bandwidth Reporting

[IIS Log Settings]

Only after poring over the reports for an hour or so did I realize why I couldn’t get bandwidth data – we didn’t have that level of tracking enabled at the server level. This resulted in some guestimating on the impact, so I recommend fixing this in your install, if you haven’t already. The default installation appears to have Bytes Sent and Bytes Received unchecked.

To calculate the bandwidth impact from feeds, first filter the dataset to specific content areas. For VibeTalk, I filtered traffic to that coming from these URLs:

   /vt/wp-feed.php
   /vt/wp-atom.php
   /vt/wp-rss*.php
   /vt/feed/

Web Log Analysis Results

[RSS stats]

(screenshot: RSS statistics for 6 days)

Because of my settings problem, I only had a few days of feed-related bandwidth info. However, it was pretty obvious that RSS crawlers pose no significant issue – we currently get about 50 visits and transfer less than 1/4 of a megabyte of data per day (one of the benefits of gzip).

It is insignificant, really.

RSS activity could be a bear if the site were to to be slashdotted.

[crawler stats]

(screenshot: Crawler statistics for September)

The majority of activity appeared to be coming from other PHP pages fetched by web crawlers. For September, spiders accounted for nearly 12000 page views! At 100k per page (a conservative average), that’s over 1 gigabyte of data.

By looking at Response Codes, I determined that most of the pages weren’t honoring the IMS/conditional GET.

There were only eight new articles last month, which means that even with several edits, page content shouldn’t change that much, which means we still have significant improvements at hand. Maybe there’s some hope afterall!

Summary

Even though my research showed little to gain for RSS feeds, there’s plenty of reason to make web aggregators more efficient. When performing traffic analysis for your own site, follow these general steps:

  • Choose a web log analytics package that processes raw server log files
  • Quantify overall traffic generated by web crawlers
  • Compare expected and actual 200 / 300 request-response ratio
  • Calculate bandwidth impact of implementing conditional GET mechanism

Now that we understand where traffic is generated on the site, the next step will be to make sure PHP content is only generated when content is updated or new. In the next and final installment of this series, I hope to solve this problem once and for all in our WordPress installation. Stay tuned for more!

« Previous Part II: Watching IMS In Action
Next » Part IV: Implementing IMS On WordPress

How To: Live Comments Preview

October 13, 2006 § 6 Comments

[comment]

Customizing WordPress Series

Welcome to the ongoing adventure of adding/removing WordPress plug-ins for VibeTalk.

This series consists of quick product reviews and useful web links for building a better website. Many of the tips and tools presented here are specifically for the WordPress publishing platform, but some can also be used on any system.

This week’s episode is about adding a more pleasing behavior to the Comments section of your WordPress blog. We’ve added the following functionality:

  • Live Preview – Some sites have preview buttons on their comment forms, but this will allow you to see a preview as you type
  • AJAX Submit – A simple but effective use for AJAX is to submit the comment in the background
  • Quick Tags – Add configurable shortcut buttons for basic HTML formatting in your comment box.
  • Smileys – Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings.
  • Gravatars – Show users’ Globally Recognized Avatar with local caching option

Most of this functionality is as simple as dropping in a plug-in!

Want to see it in action? Go to the bottom of this page and comment away – we use every one of these features.

Live Comment Preview

[live comment]

Occasionally, I run across a blog that has this neat feature: as you type your comment a preview section instantly displays what your comment will look like.

Always trying to shortcut real work by downloading a ready-made plug-in, I went through at least four offerings before finding an excellent bit of code by John Nunemaker.

It’s not a plug-in, so you’ll have to make minor edits to your PHP code, but it works amazingly well.

Before stumbling across John’s code, I tried the following. I’m listing them to possibly save you time (in either finding them or avoiding them – your choice):

Then you need to add code to the comments.php file that will make use of this script:

Then build a section to display the live comments preview. Per an excellent post titled Comment Live Preview Placement by Lorelle on WordPress.com, I recommend placing this box between the login block and the input box – this helps readers notice the preview.

AJAX Submit

Plug-in: AJAX Comments v2.07
Author: Mike Smulling

Give users some instant feedback by adding AJAX behavior. When they press Submit, rather than waiting to reload the entire page, AJAX scripting is used to perform the task in the background. They’ll see the following graphic while they wait… [download]

[loading...]
Submitting Comment…

Quick Tags

Plug-in: LMB^Box Comment Quicktags v2.4
Author: Thomas Montague

Add configurable shortcut buttons for basic HTML formatting in your comment box. [download]

Smileys

Plug-in: LMB^Box Smileys v3.2
Author: Thomas Montague

Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings. [download]

Gravatars

Plug-in: Gravatars v.2.6
Author: Scott Merrill

Show users’ Globally Recognized Avatar (see my local gravatar on the right). The plug-in will automatically lookup the users Gravatar and display the image next to their comments. To improve performance, the gravatar is cached on your site after the first load.

You can define a default gravatar for users without one, and users can optionally define a local version. [download]

How To: Multi-Purpose WordPress Landing Site

October 10, 2006 § Leave a comment

[welcome mat]

Customizing WordPress Series

Welcome to the ongoing adventure of adding/removing WordPress plug-ins for VibeTalk.

This series consists of quick product reviews and useful web links for building a better website. Many of the tips and tools presented here are specifically for the WordPress publishing platform, but some can also be used on any system.

This tutorial is about adding a multi-function Landing Site to your WordPress blog.

VibeTalk Landing Pad Serves Several Functions

It’s been there for a while, but you may not have noticed its full capability. The shaded box on the right side of this page actually has three functions: Featured Articles, Possibly Related Posts and Landing Pad.

  • Featured Articles
    The first mode is only visible on the home page of VibeTalk. You can decide what works best for your site, but I find the natural (dis)organization of blogs makes it necessary to focus readers on what you want them to see.

    The idea for building thumbnail summaries into the VibeTalk Landing Pad came from Samsarin’s handy guide on creating a WordPress home page. You can also download a plug-in on the same site that apparently simplifies the thumbnail process, but I haven’t tested it and I’m not sure if it will work with the sample code below.

  • Possibly Related Posts
    The second mode appears when viewing a single post or page and shows posts related to the words of the current post’s title. The listing is streamlined on VibeTalk to show only the titles, but you can set plug-in options to show summaries too.
  • Landing Pad
    And of course, there’s the third mode called Landing Pad. Also known as a landing site, the Landing Pad welcomes visitors who have arrived through a search engine. In addition to a list of related articles based on their search terms, the Landing Pad also highlights the search terms throughout the body of the page.

    To see it in action, run this search on Google and follow a VibeTalk link back here!

VibeTalk Source Code

Here is the actual PHP and JavaScript code currently used on the site. Some of the lines are a bit long, so you will need to copy/paste the code to an editor to see everything.